使用material-ui(mui-v5)及React无法将Menu宽度设置为与容器宽度一致

下面是可直接落地的修改方案，适配你用的Grid响应式场景：

• 动态获取按钮宽度绑定给菜单
  给Button挂载ref，通过offsetWidth拿到按钮实际渲染宽度，直接传递给Menu的容器样式。窗口缩放时实时更新宽度，天然适配响应式布局。
• 调整菜单挂载逻辑避免定位干扰
  不需要单独把Menu放到独立的Grid Item中，直接和Button放在同一个Grid Item容器内，给外层Grid Item设置position: relative，Menu设置width: 100%就可以自动继承容器宽度，和Button保持完全一致。
• 覆盖组件库默认宽度限制
  大部分UI组件库的Menu会默认设置最小/最大宽度，你需要手动覆盖这些默认样式，避免自定义宽度被优先级更高的默认规则覆盖。

核心修改代码示例 #

// ButtonCustom.js 核心逻辑
import { useRef, useState, useEffect } from 'react';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

const CustomButton = () => {
  const buttonRef = useRef(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const [menuWidth, setMenuWidth] = useState(0);

  // 初始化及窗口缩放时更新菜单宽度
  useEffect(() => {
    const updateWidth = () => {
      if (buttonRef.current) {
        setMenuWidth(buttonRef.current.offsetWidth);
      }
    };
    updateWidth();
    window.addEventListener('resize', updateWidth);
    return () => window.removeEventListener('resize', updateWidth);
  }, []);

  const handleOpen = (e) => {
    setAnchorEl(e.currentTarget);
    setMenuOpen(true);
  };

  const handleClose = () => {
    setMenuOpen(false);
    setAnchorEl(null);
  };

  return (
    <Grid item xs={12} sm={6} sx={{ position: 'relative' }}>
      <Button 
        ref={buttonRef}
        fullWidth
        variant="contained"
        onClick={handleOpen}
      >
        展开菜单
      </Button>
      <Menu
        open={menuOpen}
        anchorEl={anchorEl}
        onClose={handleClose}
        PaperProps={{
          sx: {
            width: `${menuWidth}px`,
            maxWidth: 'none !important',
            minWidth: 'unset !important'
          }
        }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left'
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left'
        }}
      >
        <MenuItem onClick={handleClose}>选项1</MenuItem>
        <MenuItem onClick={handleClose}>选项2</MenuItem>
        <MenuItem onClick={handleClose}>选项3</MenuItem>
      </Menu>
    </Grid>
  );
};

export default CustomButton;

注意如果你的项目不是用MUI，只需要对应修改组件库的菜单宽度配置属性即可，核心逻辑通用。

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