CODEWITHSUNDEEP
reactjsmaterial-uijss
KiwiCoder
KiwiCoder

Reputation: 1534

How to override Material-UI MenuItem selected background color?

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

Upvotes: 29

Views: 62054

Answers (6)

Vidya Jayagouda
Vidya Jayagouda

Reputation: 1

In material ui 5 mentioned that we can change the style of the menu item like this 

<Menu>
  <MenuItem 
   sx  = {{
      '&.MuiMenuItem-root': {
                justify-content: 'flex-start'
      },
     }}
  >
      Abc
  </MenuItem>
</Menu>

Upvotes: 0

kuzey beytar
kuzey beytar

Reputation: 3227

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/

Upvotes: 2

NearHuscarl
NearHuscarl

Reputation: 81290

In MUI v5, this is how you do it:

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

Live Demo

Codesandbox Demo

Upvotes: 17

ad0ran
ad0ran

Reputation: 326

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.

Upvotes: 6

Sandeep Amarnath
Sandeep Amarnath

Reputation: 6917

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

Upvotes: 10

Arnaud Christ
Arnaud Christ

Reputation: 3551

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

Upvotes: 12

Related Questions