使用material-ui（mui-v5）和reactjs无法使菜单宽度与容器宽度相同

Question

我试图创建一个必须与Button. 但不知何故，宽度Menu没有按预期设置。出于试用目的，我还尝试将整个菜单放入Grid项目容器中并尝试将其放入其中。但即便如此也不起作用。我尝试过提供absolute样式，但仍然不起作用。它曾经使它要么非常大，要么非常小。

这是一个可以玩的代码。我已经重新创建了我所面临的相同问题，并且可以进行编辑。

自定义按钮代码

该项目只有一个文件，其中包含所有基本代码。IE：ButtonCustom.js。请仔细阅读并给我一个解决方案。我想让它保持响应，这就是我Grid在项目中使用的原因。

谢谢你！！

Answer 1

因为您已经将原Button生 html 元素保存在状态中（它是anchorEl），所以您可以将菜单列表的宽度定义为按钮的宽度。

只需一行代码即可完成：

    <Menu
      // other props here
      MenuListProps={{
         "aria-labelledby": "basic-button",
         sx: { width: anchorEl && anchorEl.offsetWidth } // <-- The line that does all
      }}
    >