是否为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的内容，而不引入滚动条。

其他信息：这是菜单当前的外观（请注意垂直滚动条；这就是我要丢失的内容）：

Answer 1

将PopoverPaper的高度更改为“最大内容”，即可。

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