如何使用 Material-UI 构建全角超级菜单？答案

【问题标题】：How to build a full-width mega-menu using Material-UI?如何使用 Material-UI 构建全角超级菜单？
【发布时间】：2019-08-30 04:01:00
【问题描述】：

目前，我的组件如下所示：

<Menu
      id="customized-menu"
      className={classes.root}
      anchorEl={blogMenuAnchorEl}
      getContentAnchorEl={null}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      transformOrigin={{ vertical: 'top', horizontal: 'center' }}
      open={blogMenu}
      onClose={closeBlogDropDown}
    >
      <MenuItem>
        <ListItemText primary="Latest Posts" />
      </MenuItem>
      <Divider variant="fullWidth" />
      <MenuItem>
        <ListItemText primary="Learn French" />
      </MenuItem>
      <MenuItem>
        <ListItemText primary="Learn Latin" />
      </MenuItem>
      <MenuItem>
        <ListItemText primary="Learn Italian" />
      </MenuItem>
    </Menu>
  );

当然，这个下拉菜单会缩小以适应它列出的项目。但是，如果我希望下拉菜单是全角的怎么办？我想他们称其为大型菜单。我尝试在组件的样式中添加width: '100%'，但它没有效果，因为实际的下拉 div 是在运行时生成的，而我在编写脚本期间无法访问。

回购位于https://github.com/amitschandillia/proost/tree/master/web_SO，相关组件为https://github.com/amitschandillia/proost/blob/master/web_SO/components/BlogDropDown.jsx。

参考：这是我要模仿的图像：

【问题讨论】：

标签： reactjs material-ui jss

【解决方案1】：

你需要将Popover纸张宽度改为100%（下拉其实是一个popover）：

const styles = (theme) => ({
  popoverPaper: {
    width: '100%',
    height: '100%',
    maxHeight: 'unset',
    maxWidth: 'unset',
  },
});

然后将样式应用于弹出纸：

<Menu
        PopoverClasses={{paper: props.classes.popoverPaper}}
        id="customized-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >

您可以查看此 CodeSandbox 示例：https://codesandbox.io/s/material-demo-fmy64?fontsize=14

【讨论】：

这种方法唯一的问题是它强制弹出框向右移动。 left 属性由 MUI 在编译时动态生成，可能是由于 AnchorEl。有什么方法可以确保弹出框是全角的而不是移动的？
您希望弹出框在哪里？你想让它覆盖按钮，还是在按钮下方？
垂直方向，在按钮下方，就像任何常规菜单一样。但水平，以屏幕为中心。请检查我刚刚发布到问题的图片以供参考。它来自我的问题中已经提到的 URL。
你是对的，left和top属性是在运行时生成的。您可以创建自己的锚组件，但我使用 !important 覆盖顶部和左侧。我更新了 CodeSandbox：codesandbox.io/s/material-demo-fmy64?fontsize=14
希望有一个更优雅的出路（有点反对!important），但是，不管怎样都行。感谢您的宝贵时间！

【解决方案2】：

为了那些因为谷歌搜索而来到这里的人的利益。

如果您想要全宽（如巨型菜单）所需的道具具有以下marginThreshold 和PaperProps 的最小设置。这些是将传递给 Popover API 的道具。

 <Menu
   anchorEl={anchorEl}
   marginThreshold={0}
   PaperProps={{
       style: {
            width: "100%",
            maxWidth: "100%",
            left: 0,
            right: 0,
          }
        }}
    anchorOrigin={{ vertical: "bottom" }}
    transformOrigin={{ vertical: "top" }}>

fork of the selected answer

【讨论】：