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

Question

我正在尝试从 Material-UI 库中更改 Select 组件的样式。澄清一下，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。我尝试为这个类设置样式，但没有成功。

on focus 上的BackgroundColor 工作正常，但 borderColor 属性不工作。任何想法为什么？

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

Answer 1

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

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