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

Question

您好，我正在使用 material ui 和 react select。我面临的问题是我的下拉选项显示在模态窗口下方。

这是codesandbox link

我尝试了 z-index 并将 position 值更改为 absolute 但没有成功。请帮忙。

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