MUI Menu组件用styled-components设置根样式无效，如何修改菜单宽度？

我尝试用styled-components为MUI的Menu组件根层级设置样式，但.MuiMenu-root样式始终不生效，目前只能通过给MenuItem组件设置CSS宽度来调整菜单宽度，想知道正确修改Menu组件宽度的方法。

组件代码 #

import * as React from "react";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import { MenuRaw } from "./styles";

export default function BasicMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="basic-button"
        aria-controls={open ? "basic-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        Dashboard
      </Button>
      <MenuRaw
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button"
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </MenuRaw>
    </div>
  );
}

原样式代码 #

import styled from "styled-components";
import Menu from "@mui/material/Menu";

export const MenuRaw = styled(Menu)`
  width: 412px;

  .Muimenu-root {
    background-color: pink;
    .MuiMenu-paper {
      background-color: pink;
    }
  }
`;

问题分析与解决方案 #

问题根源

1. 类名拼写错误：原代码中.Muimenu-root的M小写，正确类名应为.MuiMenu-root（首字母大写）
2. 错误的样式目标：.MuiMenu-root是Menu的根定位容器，不控制菜单的可视宽度，实际承载菜单内容的是内部的paper元素（对应类名.MuiMenu-paper）
3. 样式优先级不足：MUI默认样式优先级较高，直接嵌套的样式可能被覆盖

正确写法

方案一：直接在styled-components中定位.MuiMenu-paper

修正类名并直接设置paper元素的样式，同时用&&提升优先级确保生效：

import styled from "styled-components";
import Menu from "@mui/material/Menu";

export const MenuRaw = styled(Menu)`
  && .MuiMenu-paper {
    width: 412px;
    background-color: pink;
  }
`;

方案二：结合MUI的PaperProps传递样式

通过Menu组件的PaperProps属性直接给内部paper元素设置样式，这种方式更贴合MUI的设计逻辑：

// 在组件中使用MenuRaw时添加PaperProps
<MenuRaw
  id="basic-menu"
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
  MenuListProps={{
    "aria-labelledby": "basic-button"
  }}
  PaperProps={{
    sx: { 
      width: 412, 
      backgroundColor: 'pink' 
    }
  }}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</MenuRaw>

也可以把PaperProps整合到styled-components中：

export const MenuRaw = styled(Menu).attrs({
  PaperProps: {
    sx: {
      width: 412,
      backgroundColor: 'pink'
    }
  }
})``;

内容的提问来源于stack exchange，提问作者Happy1234