reactjs - 如何覆盖选定的 MenuItem 样式？

Question

我正在项目中使用 Material-ui-next Select 组件。

大多数样式都被使用 classes 属性覆盖。但即使使用 MuiThemeProvider，selected 键也无法工作。

以下是代码的相关部分:

...

const theme = createMuiTheme({
  overrides: {
    MuiMenuItem: {
      selected: {
        backgroundColor: 'transparent',
      }
    }
  }
});

...

class SelectMUI extends Component {

  render() {

  const {className, name} = this.props

  return (
    <MuiThemeProvider theme={theme}>
      <Select
        classes={{root: 'muisc-root', icon: 'muisc-icon', select: 'muisc-select', selectMenu: 'muisc-select-menu'}}
        className={`mui-select-custom ${className}`}
        endAdornment={<Caret className='mui-select-caret'/>}
        MenuProps={{classes: {paper: 'muisc-menu-paper'}}}
        {...this.props}
      >
        {this.props.children}
      </Select>
  </MuiThemeProvider>
)

}}

因此，如您所见，当我将 MenuItems 作为 Prop 导入时，我使用 MuiThemeProvider 在项目中注入(inject)样式。

这是所选项目中应用的样式的屏幕截图:

如何覆盖这个组合来自同一元素的两个类的选择器？

Answer 1

好的，我弄清楚如何覆盖组合选择器。解决办法如下:

   MuiMenuItem: {
      root: {
        background: 'transparent',
        '&$selected': { // <-- mixing the two classes
          backgroundColor: 'transparent'
        }
      }
    }