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

Question

我试图创建一个必须与Button. 但不知何故，宽度Menu并没有按预期设置。仅出于试用目的，我还尝试将整个菜单放入GridItem 容器中并尝试将其放入其中。但即使这样也没有用。我试过给absolute造型，但还是不行。它曾经使它非常大或非常小。

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

自定义按钮代码

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

谢谢！！

标签： reactjsreact-hooksmaterial-ui

Answer 1

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

只需一行代码即可完成：

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