How to change the color of Menu in material-ui v5

Question

So far the answers I have found related to change the Menu background color are outdated, @mui/styles which provides the function makeStyles is now deprecated mui.com/styles/basics/#hook-api so I wanted to know how to change the background I tried the following:

<Menu
          style={{ background: '#272A31'}} // <- Background Color
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
            }}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >

This is how I have it wrap it:

//StyledIconButton Initialization
const StyledIconButton = styled(IconButton)(
`border-radius: 0;
color:white;

  &:hover, &.Mui-focusVisible {
    background-color: #FF5917
  }`
);

<Box sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
      <StyledIconButton size="small" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick={handleMenu}>
          <GamesIcon />
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> GAMES </Typography>
          <Menu
          style={{ background: '#272A31'}}
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
            }}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem onClick={handleClose} style={{ background: '#272A31', color: "white"}}>GAME A</MenuItem>
            <MenuItem onClick={handleClose} style={{ background: '#272A31', color: "white"}}>GAME B</MenuItem>
            <MenuItem onClick={handleClose} style={{ background: '#272A31', color: "white"}}>GAME C</MenuItem>
            <MenuItem onClick={handleClose} style={{ background: '#272A31', color: "white"}}>GAME D</MenuItem>
          </Menu>
      </StyledIconButton>
      </Box>

But by doing that it make the whole screen in that color when I try to open the menu lol:

This is what I'm trying to achieve:

Updated the sandBox for some reason didn't saved correctly last time CodeSandBox

Answer 1

I spent a lot of time trying to solve this properly - that is to say, to not change the whole structure of the MUI component because I wanted to style this menu that is composed of a <Menu> component and some <MenuItem>.

Here is the solution :

The Menu component is actually composed of the List component.

See here

So instead of styling the component MuiMenu (that will change the background of the whole page), you have to style the component MuiList.

On the Menu API doc, they claim there are two ways to style it :

• With a global class name. (by importing a CSS file which will contain the following):

    .MuiList-root {
    color: 'white';
    background-color: 'black';
  }

• With a rule name as part of the component's styleOverrides property in a custom theme (you'll have to import ThemeProvider, createTheme and wrap your menu component in the ThemeProvider as described on MUI's doc ) :

const theme = createTheme({
      components: {
        MuiList: {
          styleOverrides: {
            root: {
              backgroundColor: 'black',
              color: 'white',
            },
          },
        },
      },
    });

Answer 2

Added another wrapper in this case paper to wrap my menu and my menu items so that way I can style them.

//Initialize the following
   const StyledPaper = styled(Paper)(
  `border-radius: 0;
   color: white;
   background: #272A31;
   `
);

const StyledMenuItem = styled(MenuItem)(
  ` 
    &:hover, &.Mui-focusVisible {
      background-color: #FF5917
    }`
  );

//Then instead of using Paper and MenuItem i'll be using the styled versions I created they have the same functions only thing that changes is their style
    <StyledPaper >
       <ClickAwayListener onClickAway={handleClose}>
       <MenuList autoFocusItem={open} id="composition-menu" aria-labelledby="composition-button" onKeyDown={handleListKeyDown}> 
       <StyledMenuItem onClick={handleClose}>JUNGLE RAIDER</StyledMenuItem>
            <StyledMenuItem onClick={handleClose}>MEGAMAN TEMPLATE</StyledMenuItem>
            <StyledMenuItem onClick={handleClose}>TOWER DEFENSE</StyledMenuItem>
            <StyledMenuItem onClick={handleClose}>BLADES AND DUNGEON</StyledMenuItem>
            <StyledMenuItem onClick={handleClose}>FIXSPACE</StyledMenuItem>
        </MenuList>
       </ClickAwayListener>
      </StyledPaper>

It should look like this (I have to change the zAxis and tweak the origin but got the style/colors I want :3

Answer 3

Just add the styling in the parent component. I tried in my editor and doing that solves the issue.

<Box sx={{ background: '#272A31',flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>

and remove the styling from menu element:

<Menu style={{no bgColor}} props>