How to override material-ui MenuItem selected background color?

reactjs material-ui jss
Kevin Vugts picture Kevin Vugts · May 16, 2018 · Viewed 22.2k times · Source

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)

The component code:

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

This is the css:

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

What do I want to achieve?

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.

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

Thanks for any help.

Answer

Arnaud Christ picture Arnaud Christ · May 16, 2018

I just made a working example here

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 }}
>

Related questions

How to add multiple classes in Material UI using the classes props

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Here is how I used it: return ( &…

Read More
How to change the border color of Material-UI <TextField/>

I can't seem to figure out how to change the outline color of an outlined variant I looked around GitHub issues and people seem to be pointing towards using the "InputProps" Property but this seems to do nothing. Here is …

Read More
How to set default value in material-UI select box in react?

I am using Select box from material-ui I want to show "select the value" option by default selected but after that user is not able to select this option. <FormControl required className={classes.formControl}> <InputLabel htmlFor="circle"&…

Read More