web-dev-qa-db-fra.com

Comment remplacer la couleur d'arrière-plan MaterialIu MenuItem sélectionnée?

Actuellement, j'ai du mal à définir la couleur d'arrière-plan d'un composant MenuItem qui est sélectionné dans une couleur différente. (sans avoir à utiliser! important de le forcer)

Le code du composant:

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

Ceci est le css:

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

Que veux-je réaliser?

Je voudrais définir le backgroundColor du MenuItem sans avoir à définir le! Important flagg. Je l'ai fait avec de nombreux composants, mais cela ne semble pas fonctionner pour le moment.

J'utilise la version "@ material-ui/core": "^ 1.0.0-rc.0",

Merci pour toute aide.

reactjsmaterial-uijss
5
Kevin Vugts

Je viens de faire un exemple de travail ici

Pour que votre classe sélectionnée soit prise en compte, vous devez définir la propriété selected de votre composant MenuItem sur true

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