使用 React material-ui 更改 OutlinedInput 的輪廓

Question

快速說明：這不是如何更改 Material UI React 輸入組件的輪廓顏色的副本？

使用 material-ui (React) 我無法刪除懸停或聚焦時的輪廓。 我使用這個輸入的原因是在出現警告時請求添加一個小的紅色邊框。 我可以更改聚焦和懸停樣式。 這在下圖中進行了測試：

輸入焦點時應用此 CSS 的位置：

outlinedInputFocused: {
     borderStyle: 'none',
     borderColor: 'red',
     outlineWidth: 0,
     outline: 'none',
     backgroundColor: 'green'
  },

成分

 <OutlinedInput
            disableUnderline={true}
            notched={true}
            id="adornment-weight"
            classes={{root: classes.outlinedInput, focused: classes.outlinedInputFocused}}
            value={this.state.budgetValue}
            onChange={evt => this.updateBudgetValue(evt)}
            onKeyPress={evt => this.handleKeyPress(evt)}
            endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
          />

如您所見，圖像的顏色為綠色，但仍有輪廓。 即使outlineWidth 為0 並且在CSS 中將outline 設置為none。 如何更改/禁用此大綱？

Answer 1

了解如何覆蓋這些樣式的關鍵是查看它們在 Material-UI 源代碼中是如何定義的。 您引用的問題還顯示了一些所需的語法。

以下是OutlinedInput.js樣式的縮寫版本（我省略了與輪廓無關的樣式）：

export const styles = theme => {
  const borderColor =
    theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';

  return {
    /* Styles applied to the root element. */
    root: {
      position: 'relative',
      '& $notchedOutline': {
        borderColor,
      },
      '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
        borderColor: theme.palette.text.primary,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          borderColor,
        },
      },
      '&$focused $notchedOutline': {
        borderColor: theme.palette.primary.main,
        borderWidth: 2,
      },
      '&$error $notchedOutline': {
        borderColor: theme.palette.error.main,
      },
      '&$disabled $notchedOutline': {
        borderColor: theme.palette.action.disabled,
      },
    },
    /* Styles applied to the root element if the component is focused. */
    focused: {},
    /* Styles applied to the root element if `disabled={true}`. */
    disabled: {},
    /* Styles applied to the root element if `error={true}`. */
    error: {},
    /* Styles applied to the `NotchedOutline` element. */
    notchedOutline: {}

  };
};

OutlinedInput的“輪廓”是通過嵌套在其中的NotchedOutline組件上的border控制的。 為了影響該嵌套元素，您需要定義一個“notchedOutline”類（即使是空的），然后您可以使用它來針對父元素的不同狀態（例如聚焦、懸停）定位該元素。

這是一個完全刪除邊框的示例：

import React from "react";
import ReactDOM from "react-dom";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  root: {
    "& $notchedOutline": {
      borderWidth: 0
    },
    "&:hover $notchedOutline": {
      borderWidth: 0
    },
    "&$focused $notchedOutline": {
      borderWidth: 0
    }
  },
  focused: {},
  notchedOutline: {}
});
function App(props) {
  const { classes } = props;
  return (
    <div className="App">
      <OutlinedInput
        disableUnderline={true}
        notched={true}
        id="adornment-weight"
        classes={classes}
        value={1}
        endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Answer 2

OutlinedInput的設計方式使您無法關閉其輪廓，您必須使用帶有variant “outlined”作為默認值且“none”為焦點的TextField 。 您可以在此處查看使用TextField的Outlined Input Adornments示例

Answer 3

您可以像這樣使用內聯樣式：

<MyComponent style={{outline: 'none'}} />

Answer 4

2.4.7 焦點可見：任何可通過鍵盤操作的用戶界面都具有鍵盤焦點指示器可見的操作模式。 (AA級)

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr -導航機制-焦點可見