如何使用 Material-UI 构建全宽巨型菜单？

Question

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

<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 .

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

Answer 1

For benefit of people who came here because of google search.

The props needed if you want the full width ( like a mega menu ) is with the following minimum settings of marginThreshold and PaperProps. These are props which will be pass to 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

Answer 2

您需要将 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