How to change the color of Menu in material-ui

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x