reactjs - 如何覆盖 Material-UI MenuItem 选择的背景颜色？

Question

目前，我正在努力将MenuItem选择的组件的背景颜色设置为不同的颜色。（无需使用 !important 强制它）

组件代码：

<MenuItem
 classes={{
  root: this.props.classes.root,
  selected: this.props.classes.selected
 }}
 value={10}>
  Alfabetical
</MenuItem>

这是CSS：

const homePageStyle = (theme) => ({
  root: {
    width: "300px"
  },
  selected: {
    backgroundColor: "turquoise !important",
    color: "white",
    fontWeight: 600
  }
});

我想达到什么目标？

我想设置backgroundColorofMenuItem而不必设置 !important 标志。我已经用大量组件做到了这一点，但目前这似乎行不通。

我正在使用版本“@material-ui/core”：“^1.0.0-rc.0”，

Answer 1

我只是在这里做了一个工作示例

要考虑您选择的类，您必须将组件的selected属性设置MenuItem为 true

<MenuItem
  onClick={this.handleClose}
  selected
  classes={{ selected: classes.selected }}
>

Answer 2

我这样做是为了更改选定的 MenuItem 背景。（材质 UI 提供的选定道具）。

export default createMuiTheme({
  overrides: {
    MuiMenuItem: { // For ListItem, change this to MuiListItem
      root: {
        "&$selected": {       // this is to refer to the prop provided by M-UI
          backgroundColor: "black", // updated backgroundColor
        },
      },
    },
  },
});

这些是可以覆盖的默认值https://material-ui.com/customization/default-theme/#default-theme

参考：https ://material-ui.com/customization/components/#global-theme-override

注意：我使用的是 Material-UI 版本 4.9.11

Answer 3

您可以将样式更新为：

const homePageStyle = (theme) => ({
  root: {
    width: "300px"
  },
  selected: {
    '&.Mui-selected': {
        backgroundColor: "turquoise",
        color: "white",
        fontWeight: 600
    }
  }
});

这是因为 material-ui 设置了这个组件的样式：.MuiListItem-root.Mui-selected 这两个类的特殊性优先于提供的覆盖。

Answer 4

在MUI v5中，您可以这样做：

<Select
  MenuProps={{
    sx: {
      "&& .Mui-selected": {
        backgroundColor: "pink"
      }
    }
  }}
>

现场演示