web-dev-qa-db-ja.com

material-ui MenuItemの選択した背景色を上書きする方法は？

現在、選択されている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を設定したいと思います。私はたくさんのコンポーネントを使ってそれをしましたが、これは現時点ではうまくいかないようです。

私はバージョン "@ material-ui/core"を使用しています： "^ 1.0.0-rc.0"、

助けてくれてありがとう。

reactjsmaterial-uijss
5
Kevin Vugts

私は ここでの作業例 を作成しました

選択したクラスを考慮に入れるには、selectedコンポーネントのMenuItemプロパティをtrueに設定する必要があります

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