实质性用户界面-面临一个问题，下拉选项位于模式窗口页脚下方

Question

您好，我正在使用材料ui并反应select。我遇到一个问题，我的下拉选项显示在模式窗口下方。

这是密码框link

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

Answer 1

之所以发生这种情况，是因为在两个地方出现了 overflow-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 demo