如何使用 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 and the component in question is https://github.com/amitschandillia/proost/blob/master/web_SO/components/BlogDropDown.jsx。

REFERENCE：这是我要模拟的图像：

Answer 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

Answer 2

为了google搜索来到这里的人的利益。

如果您想要全宽度（如大型菜单），则需要以下最小设置 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

如何使用 Material-UI 构建一个全角大型菜单？

How to build a full-width mega-menu using Material-UI?

reactjs

material-ui

jss