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 flag. 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",

@ArnaudChrist I am using the "@material-ui/core": "^1.0.0-rc.0", — Kevin Vugts, May 16 '18 at 12:56
The right answer is the first answer here: https://stackoverflow.com/questions/49439266/how-to-override-selected-menuitem-style/49439580#49439580 — user752963, Oct 03 '19 at 06:26

score 13 · Answer 1 · answered Oct 01 '21 at 08:52

13

In MUI v5, this is how you do it:

<Select
  MenuProps={{
    sx: {
      "&& .Mui-selected": {
        backgroundColor: "pink"
      }
    }
  }}
>

Live Demo

answered Oct 01 '21 at 08:52

NearHuscarl

66,950
18
261
230

2

Man you are such a live saver! Thank you! Was searching for this. :) – Abhik Banerjee Oct 28 '21 at 11:36
In some cases, MUI MenuItem looks like selected but there is just a focus. Can be overriden by &.Mui-focusVisible. – apincik Apr 17 '23 at 16:04

score 12 · Answer 2 · answered May 16 '18 at 13:09

12

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

answered May 16 '18 at 13:09

Arnaud Christ

3,440
3
24
33

This worked already before you made this example. But the thing is the !important flag. I don't like to use it, so is there an alternative for no using it? – Kevin Vugts May 16 '18 at 13:15
And would you like to update your demo to also cover the select underline color change? https://material-ui-next.com/demos/selects/#selects – Kevin Vugts May 16 '18 at 13:15
1

Sorry, I went to fast into typing code and forgot about your "!important" problem. It seems to be a bug, maybe you can open an issue about it on GitHub. A workaround could be to apply the appropriate background color in the root css according to the selected state and to not use the selected css. – Arnaud Christ May 16 '18 at 14:52
Thanks! May you update your answer to apply to TextFields for material-ui. How would I be able to edit the underline of the TextField component which is animated from color with a transition css animation? – Kevin Vugts May 17 '18 at 06:03
I pretty confident you can change this color by overriding the primary color property in the material-ui theme you provide to your application. – Arnaud Christ May 17 '18 at 07:10
How would I do it with the className or classes props? :) – Kevin Vugts May 17 '18 at 08:26

Sandeep Amarnath · Answer 3 · 2020-04-28T23:52:11.267

I'm doing it this way to change the MenuItem background of selected. (selected prop provided by material UI).

export default createMuiTheme({
  overrides: {
    MuiMenuItem: { // For ListItem, change this to MuiListItem
      root: {
        "&$selected": {       // this is to refer to the prop provided by M-UI
          backgroundColor: "black", // updated backgroundColor
        },
      },
    },
  },
});

These are the defaults that can be overridden https://material-ui.com/customization/default-theme/#default-theme

Reference: https://material-ui.com/customization/components/#global-theme-override

Note: I'm using Material-UI version 4.9.11

score 6 · Answer 4 · answered Jan 08 '21 at 21:42

You can updated your styles to this:

const homePageStyle = (theme) => ({
  root: {
    width: "300px"
  },
  selected: {
    '&.Mui-selected': {
        backgroundColor: "turquoise",
        color: "white",
        fontWeight: 600
    }
  }
});

This is because of how material-ui styles this component: .MuiListItem-root.Mui-selected The specificity of those two classes is taking priority over the provided override.

score 2 · Answer 5 · answered Jul 07 '22 at 07:43

To customize component style in Mui v5, you can try this:

MuiListItemButton: {
  styleOverrides: {
    root: {
      '&.Mui-selected': {
        backgroundColor: '#e44444',
      }
    }
  },
},

You'll want to use MuiListItemButton component, because "selected" is deprecated in MuiListItem.

Customizing components: https://mui.com/material-ui/customization/theme-components/

How to override Material-UI MenuItem selected background color?

5 Answers5

Live Demo

Linked