reactjs - 为 Material-UI 下拉菜单动态设置高度？

Question

我正在使用自定义弹出框样式在我的 React 项目中使用 Material-UI 创建一个超级菜单。样式如下所示：

root: {
    marginTop: theme.spacing(1.5),
    [theme.breakpoints.down('sm')]: {
      display: 'none',
    },
  },
popoverPaper: {
  width: '90%',
  height: '80%',
  maxHeight: 'unset',
  left: '5% !important',
},
paper: {
  padding: theme.spacing(2),
  textAlign: 'center',
  color: theme.palette.text.secondary,
},

然后我将此自定义 CSS 应用到我的Menu组件，如下所示：

<Menu
  id="customized-menu"
  className={classes.root}
  anchorEl={blogMenuAnchorEl}
  anchorOrigin={{ vertical: 'bottom' }}
  transformOrigin={{ vertical: 'top' }}
  getContentAnchorEl={null}
  open={blogMenu}
  onClose={closeBlogDropDown}
  PopoverClasses={{ paper: classes.popoverPaper }}
>

这按预期工作。但是，我不想硬编码height属性并希望它根据它包含的元素数量来扩展/收缩。我尝试取消height: 80%，但这会在我的下拉菜单中引入一个垂直滚动条。有什么办法可以做到这一点？我想完整地显示内容Menu，而不引入滚动条。

附加信息：这是菜单当前的样子（注意垂直滚动条；这就是我想要失去的）：

标签： reactjsdrop-down-menumaterial-ui

Answer 1

将 PopoverPaper 高度更改为“最大内容”，应该这样做。

popoverPaper: {
  width: '90%',
  height: 'max-content', //change here
  maxHeight: 'unset',
  left: '5% !important',
},