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

【问题标题】：How to override Material-UI MenuItem selected background color?如何覆盖 Material-UI MenuItem 选择的背景颜色？
【发布时间】：2018-10-26 12:48:34
【问题描述】：

目前我正在努力将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 标志。我已经用很多组件做到了这一点，但目前这似乎无法解决。

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

【问题讨论】：

你用的是什么版本的material-ui？
@ArnaudChrist 我正在使用“@material-ui/core”：“^1.0.0-rc.0”，
正确答案是这里的第一个答案：stackoverflow.com/questions/49439266/…

标签： reactjs material-ui jss

【解决方案1】：

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

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

现场演示

【讨论】：

哥们，你真是个救命恩人！谢谢！正在寻找这个。 :)

【解决方案2】：

您可以将样式更新为：

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

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

【讨论】：

【解决方案3】：

我这样做是为了改变选中的 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

【讨论】：

【解决方案4】：

我刚刚发了working example here

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

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

【讨论】：

这在你做这个例子之前就已经有效了。但问题是 !important 标志。我不喜欢用，有没有不用的替代方法？
您想更新您的演示以涵盖选择下划线颜色的变化吗？ material-ui-next.com/demos/selects/#selects
对不起，我快速输入代码并忘记了您的“！重要”问题。这似乎是一个错误，也许你可以在 GitHub 上打开一个关于它的问题。一种解决方法可能是根据所选状态在根 css 中应用适当的背景颜色，并且不使用所选 css。
谢谢！能否更新您的答案以适用于 Material-ui 的 TextFields。我怎样才能编辑 TextField 组件的下划线？
我非常有信心您可以通过覆盖您提供给应用程序的 material-ui 主题中的主要颜色属性来更改此颜色。