Question

目前，我正在努力设置选择为不同颜色的MenuItem组件的背景颜色。（不必使用！重要来强迫它）

组件代码：

<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 flagg。我已经用大量的组件做到了这一点，但目前似乎无法解决这个问题。

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

感谢您的帮助。

Answer 1

我这样做是为了更改选定的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 2

您可以将样式更新为：

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

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

如何覆盖material-ui MenuItem选择的背景颜色？

2 个答案: