时间戳

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

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

问题描述

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

这是codeandbox链接

下拉选项位于模态页脚下方

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

标签： cssreactjsmaterial-ui

解决方案

发生这种情况是因为两个地方的溢出规则：对话文件和对话内容。只需使用 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 演示

推荐阅读