Material UI - 面临下拉选项位于模态窗口页脚下方的问题

Question

嗨，我正在使用材料 ui 并做出反应 select 。我面临一个问题，我的下拉选项显示在模态窗口下方。

这是代码和框链接

我尝试了 z-index 并将位置值更改为绝对值，但没有成功。请帮忙。

Answer 1

发生这种情况的原因是两个地方的溢出 y规则：对话文件和对话内容。只需使用 material-ui 样式来覆盖此规则：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  paperFullWidth: {
    overflowY: 'visible'
  },
  dialogContentRoot: {
    overflowY: 'visible'
  }
});

然后将这些类应用于您的组件：

const classes = useStyles();
   ...
<Dialog
        ...
        fullWidth={true}
        classes={{
          paperFullWidth: classes.paperFullWidth
        }}
      >
  ...
 <DialogContent
        classes={{
          root: classes.dialogContentRoot
        }}

你可以参考这个CodeSandbox 演示