如何用styled-components覆盖MUI的PaperProps实现Menu宽度修改？

当然可以用styled-components实现，问题出在你之前的写法只给Menu本身设置了宽度，但Menu的弹出层实际是由内部的Paper组件控制尺寸的，所以得针对这个子组件来样式化，下面两种方法都可行：

方法一：直接在StyledMenu中选中内部Paper组件 #

通过类名选中Menu里的Paper元素，直接设置宽度：

import { Menu } from '@mui/material';
import styled from 'styled-components';

const StyledMenu = styled(Menu)`
  & .MuiPaper-root {
    width: 100%;
  }
`;

// 使用示例
<StyledMenu
  id="menu-appbar"
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
>
  {/* 菜单项内容 */}
</StyledMenu>

方法二：用styled-components自定义Paper组件，再传给Menu的PaperProps #

先单独创建样式化的Paper组件，再通过PaperProps替换Menu默认的Paper：

import { Menu, Paper } from '@mui/material';
import styled from 'styled-components';

const StyledPaper = styled(Paper)`
  width: 100%;
`;

// 使用示例
<Menu
  id="menu-appbar"
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  PaperProps={{ component: StyledPaper }}
>
  {/* 菜单项内容 */}
</Menu>

之前你用&&给Menu设置宽度无效，是因为Menu的根元素并不是弹出层的容器，真正决定弹出层宽度的是内部的Paper组件，所以必须针对它来设置样式。

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