如何覆盖Material-ui MenuItem选择的背景色? [英] How to override material-ui MenuItem selected background color?

问题描述

当前，我正在努力将选择的MenuItem组件的背景色设置为其他颜色. (无需使用！important强制执行此操作)

Currently I am struggling with setting the background color of a MenuItem component which is selected to a different color. (without having to using !important to force it)

组件代码:

<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 would like to set the backgroundColor of the MenuItem without having to set the !important flagg. I've done that with plenty of components but this seems not work around at the moment.

我正在使用版本"@ material-ui/core":"^ 1.0.0-rc.0"，

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

感谢您的帮助.

推荐答案

我刚刚制作了一个此处的工作示例

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

For your selected class to be taken into account, you have to set the selected property of your MenuItem component to true

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

这篇关于如何覆盖Material-ui MenuItem选择的背景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！