How to change the color of Menu in material-ui

2
votes

I am using Menu from material-ui and want to change the background color. Problem is, when I give color to Menu, it changes the whole page background when the menu popper appears. And when I apply color to Menu Items, it leaves some grey shades at the top and bottom, because all these menu Items are enclosed inside a div. Problem Sandbox: https://codesandbox.io/s/material-ui-dropdown-background-color-g88e1

What's the right way to change Menu's background color?

I tried createMuiTheme for changing this, but it changes the color of all the Menus in my application. I want to apply this style to only one of the Menu Items. So looking for a solution to do this using makeStyle

1
javascripthtmlcssreactjsmaterial-ui

1 Answers

8
votes

There are multiple ways

1.Material-UI Menu CSS API

we have the API called paper

Global class: .MuiMenu-paper
Description: Styles applied to the Paper component.

<Menu
  ...
  classes={{ paper: classes.menuPaper }}
>

export const useStyles = makeStyles((theme: Theme) => ({
  menuPaper: {
    backgroundColor: "lightblue"
  }
}));

2.Use Material-UI nesting selector to directly select the MuiPaper-root

An optional way for some cases when there is no related CSS API exposed.

<Menu
  ...
  className={classes.menu}
>

export const useStyles = makeStyles((theme: Theme) => ({
  menu: {
    "& .MuiPaper-root": {
      backgroundColor: "lightblue"
    }
  }
}));

enter image description here

You can check the DOM structure to find out which element's className should you use

<div
  class="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"
  tabindex="-1"
  style="opacity: 1; transform: none; transition: opacity 251ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 167ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; top: 16px; left: 16px; transform-origin: -8px 10px;"
>
  <ul>
    <li />
    <li />
    <li />
  </ul>
</div>;

Here the MuiPaper-root appears to be the first. So use it would be fine.