从Material-UI（反应）中的“选择组件”中更改焦点对准状态的边框颜色

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
  labelId="demo-simple-select-outlined-label"
  id="demo-simple-select-outlined"
  value={value}
  onChange={handleChange}
  labelWidth={labelWidth}
>

当我单击下拉列表时，在Select div上唯一更改的类是Mui-focused。我尝试为此类设置样式，但没有效果。

BackgroundColor上的

on focus正在工作，但borderColor属性却没有。有什么想法吗？

我找到了我想要的Input元素的行为，这是类（请参见下图） 这是绿色边框，已应用在焦点上

Answer 1

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

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