如何更改 material-ui v5 中菜单的颜色

Question

到目前为止，我发现与更改Menu背景颜色相关的答案已经过时， @mui/styles提供 function makeStyles 现在已弃用mui.com/styles/basics/#hook-api所以我想知道如何更改背景我尝试了以下方法：

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

这就是我包装它的方式：

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

但是通过这样做，当我尝试打开菜单时，它会使整个屏幕变成那种颜色，哈哈：

这就是我想要实现的目标：

由于某种原因更新了沙盒，上次没有正确保存CodeSandBox

Answer 1

在这种情况下添加了另一个包装纸来包装我的菜单和菜单项，以便我可以设置它们的样式。

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

它应该看起来像这样（我必须更改 zAxis 并调整原点，但得到了我想要的样式/颜色：3

Answer 2

只需在父组件中添加样式即可。 我在我的编辑器中尝试过，这样做可以解决问题。

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

并从菜单元素中删除样式：

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