J'ai cherché partout, mais je ne trouve pas de réponse à cette question: Comment changer la couleur du texte (et non celle de l'arrière-plan) d'un élément de menu sélectionné ou survolé? JE SAIS que la réponse se trouve quelque part dans useStyles, mais j'ai essayé un certain nombre de choses qui ne fonctionnent pas. J'ai essayé d'utiliser css pour ce faire, mais material-ui a ses propres conventions de dénomination css.
&.selected: {
color: "#ffffff",
}
Quelqu'un peut-il indiquer ce que je dois ajouter à useStyles pour changer le texte sélectionné d'un menuitem en blanc?
J'ai essayé d'ajouter des éléments comme
const StyledMenuItem = withStyles(theme => ({
root: {
"&:focus": {
backgroundColor: theme.palette.primary.main,
"& .MuiListItemIcon-root, & .MuiListItemText-primary": {
color: theme.palette.common.white
}
},
paddingTop: "4px",
paddingBottom: "4px",
paddingRight: "4px",
paddingLeft: "4px",
margin: "4px",
fontSize: "0.8rem",
lineHeight: "1",
},
searchMenuItem: {
paddingTop: "2px",
paddingBottom: "2px",
selectedTextColor: "#ffffff",
}
}))(MenuItem);
aux classes menuitem mais cela ne fonctionne toujours pas. Toute aide serait grandement appréciée!
3 Réponses :
utilisez un sélecteur CSS comme vous l'avez fait, mais vérifiez dans la console quelle classe est exactement utilisée sur les éléments sélectionnés comme je le vois dans la documentation, cela devrait fonctionner pour vous:
& .Mui-sélectionné: { couleur: "#ffffff", }
Merci! J'ai utilisé une autre réponse ci-dessous, mais j'ai essayé la vôtre en vérifiant l'objet de débogage et votre réponse fonctionne également.
Pour toute autre personne qui a un problème pour changer la couleur du texte d'un élément de menu sélectionné, vous devez utiliser la commande & hover mateial-ui.
Par exemple, pour avoir un texte blanc dans un élément de menu sélectionné sur un fond sombre, faites ceci (lorsque le thème principal a une couleur d'arrière-plan sombre pour les éléments sélectionnés):
const StyledMenuItem = withStyles(theme => ({
root: {
"&:focus": {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white, <===ADD THIS LINE
"& .MuiListItemIcon-root, & .MuiListItemText-primary": {
color: theme.palette.common.white
}
},
}
}))(MenuItem);
En gros, j'ai essayé les docs a> pour remplacer les styles CSS qui n'ont pas fonctionné pour une raison quelconque , il y a une bonne réponse ici qui a la solution pour cela, mais je trouve trop long et fastidieux de travailler avec mateial-ui comme ça , Je pense que CSS est beaucoup plus facile. J'ai donc opté pour une approche différente et essayé la spécificité du CSS qui a abouti au succès. voici un jsfiddle écrit en react (peu importe dans quoi vous l'écrivez, vous avez juste besoin du CSS). L'idée était de regarder dans les outils de développement et d'essayer de voir quelles classes le menu contient et d'en tirer le meilleur parti avec les règles CSS. Voici du code CSS: const { Menu, MenuItem, MuiThemeProvider, getMuiTheme } = MaterialUI;
class Example extends React.Component {
render() {
return (
<Menu className="horiz-menu">
<MenuItem primaryText="Home" />
<MenuItem primaryText="Test Menu 1" />
<MenuItem primaryText="Test Menu 2" />
<MenuItem primaryText="About" />
</Menu>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Example />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
Salut Natanhel. C'est une bonne information à savoir. Je ne suis pas non plus un grand fan de matériel-ui css, donc il est utile de connaître un css simple pour contourner ce problème à l'avenir. Merci!