Reactjs 如何覆盖材质ui菜单项选定的背景色？

目前，我正在努力将一个菜单项组件的背景色设置为不同的颜色。（无需使用！强制使用它很重要）

组件代码：

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

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

我想要实现什么

我想设置菜单项的背景色，而不必设置颜色！重要标志。我已经用很多组件完成了这项工作，但目前似乎无法解决这一问题

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

谢谢你的帮助。

我刚打了个电话

要考虑所选类，必须将

MenuItem

组件的

selected

属性设置为true

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

---

我这样做是为了更改选定对象的菜单项背景。（所选道具由物料界面提供）

这些是可以覆盖的默认值

参考：

---

注意：我正在使用材质UI版本4.9.11

您可以将样式更新为：

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

这是因为材质ui如何设置此组件的样式：

.MuiListItem root.Mui已选中

---

这两个类的特殊性优先于所提供的覆盖。

您使用的是什么版本的material ui？@ArnaudChrist我使用的是“@material ui/core”：“^1.0.0-rc.0”，正确的答案是这里的第一个答案：这在您制作此示例之前已经起作用了。但事情是这样的！重要的旗帜。我不喜欢使用它，所以有没有其他不使用它的方法呢？你想更新你的演示，也包括选择下划线颜色的变化吗？对不起，我输入代码太快了，忘记了你的“！重要”问题。这似乎是一个bug，也许你可以在GitHub上打开一个关于它的问题。一种解决方法是根据所选状态在根css中应用适当的背景颜色，而不使用所选css。谢谢！您可以更新您的答案以应用于材料ui的文本字段。我怎样才能编辑TextField组件的下划线，该组件是使用过渡css动画从颜色设置动画的？我很有信心，您可以通过覆盖您提供给应用程序的材质ui主题中的primary color属性来更改此颜色。

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