Question

我需要更改选择框的边框颜色。 Codesandbox link

仅当我覆盖此样式（重点样式）时，它才起作用

.MuiOutlinedInput-root.Mui-focused 
.MuiOutlinedInput-notchedOutline {
    border-color: #3f51b5;
    border-width: 2px;
}

并且此类具有重要的CSS规则（默认样式）

.MuiOutlinedInput-notchedOutline {
    border-color: rgba(0, 0, 0, 0.23);
}

要进行更新（重点关注），请在下面编写此代码。

.MuiOutlinedInput-root.Mui-focused 
.MuiOutlinedInput-notchedOutline {
    border-color: red !important;
 }

正如Material Documentation所说的那样，要更新此样式，我需要notchedOutline关键字。但是当我使用此关键字时，会出错。

我将此关键字指定给FormControl

<FormControl 
        className={formControl} 
        classes={{ notchedOutline: classes.notchedOutline}}
        >

控制台错误

Material-UI: the key `notchedOutline` provided to the classes prop is not implemented in ForwardRef(FormControl).
You can only override one of the following: root,marginNormal,marginDense,fullWidth.

我也将此关键字作为Select属性和classes属性赋予inputProps组件，并且得到几乎相同的错误

<Select
          id="select-box"
          value={age}
          onChange={handleChange}
          className={classes.defaultStyle}
          displayEmpty
          classes={{ notchedOutline: classes.notchedOutline }}
          MenuProps={{
            getContentAnchorEl: null,
            anchorOrigin: {
              vertical: 'bottom',
              horizontal: 'left',
            },
          }}
        >

控制台错误

Material-UI: the key `notchedOutline` provided to the classes prop is not implemented in ForwardRef(Select).
You can only override one of the following: root,select,filled,outlined,selectMenu,disabled,icon,iconOpen,iconFilled,iconOutlined.

在MaterialUI中更改选择框的轮廓边框颜色

0 个答案: