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
  }
});

我想实现什么目标？

我想设置 MenuItem 的 backgroundColor 而不必设置 !important 标志。我已经使用大量组件完成了此操作，但目前似乎无法解决问题。

I am using version "@material-ui/core": "^1.0.0-rc.0",

Answer 1

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

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

现场演示