How to override material-ui MenuItem selected background color?

Question

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 1

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