reactjs - 在从 Material-UI 中选择组件（React）中更改焦点状态的边框颜色

Question

我正在尝试Select从 Material-UI 库中更改焦点组件的样式。澄清on focus一下，不是输入的正常边框，而是单击下拉列表的元素后（焦点状态）

这是我取得的成就：

https://codesandbox.io/s/ancient-cookies-4femm

我设法改变了on focus状态输入的背景。我无法为边框设置样式。到目前为止我所拥有的：

我用一个包装了我的组件ThemeProvider：

<ThemeProvider theme={theme1}>
  My component
</ThemeProvider>

在哪里theme1：

const theme1 = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        "&:focus": {
          backgroundColor: '#ffddec',
          color: 'brown'
        },
        '&:before': {
          borderColor: 'orange'
        },
        '&:after': {
          borderColor: 'green',
        }
      }
    }
  }
});

我的 Select 组件如下所示：

<Select
  labelId="demo-simple-select-outlined-label"
  id="demo-simple-select-outlined"
  value={value}
  onChange={handleChange}
  labelWidth={labelWidth}
>

Select当我单击下拉列表时， div上唯一更改的类是Mui-focused. 我试图为这门课设置样式，但没有奏效。

BackgroundColoronon focus正在工作，但不是该borderColor属性。任何想法为什么？

我找到了我想要的 Input 元素的行为，这里是类（见附图）它是绿色边框，它被应用在焦点上

标签： reactjsmaterial-ui

Answer 1

在焦点事件中用边框颜色替换颜色。

const theme1 = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        "&:focus": {
          backgroundColor: '#ffddec',
          borderColor: 'brown'
        },
        '&:before': {
          borderColor: 'orange'
        },
        '&:after': {
          borderColor: 'green',
        }
      }
    }
  }
});