React-select 菜单被 Dialog Content 和 Dialog Action 组件隐藏答案

【问题标题】：React-select menu is being hidden by Dialog Content and Dialog Action componentsReact-select 菜单被 Dialog Content 和 Dialog Action 组件隐藏
【发布时间】：2019-11-03 16:25:30
【问题描述】：

我是 Material UI 和 React 的新手，在其他问题上没有发现这种 .我正在尝试使用 React-Select 组件开发对话框材质 UI。问题是 Dialog 上的 react-select 菜单被 Dialog Action 组件隐藏。 My Dialog Component

react-select 组件下方的这一行是 react-select 渲染的 Paper 组件。

我尝试了一些 CSS 代码，例如 zIndex 和位置，但仍然没有找到显示菜单的方法，或者更好的是，让菜单（Paper 组件）覆盖 Dialog Action 组件。

我的对话框、对话框内容和对话框操作使用以下类名：

 dialog: {
        zIndex:0,
        display:'flex',
        flex:1,
        flexGrow:1,
        flexDirection:'column',
        flexWrap: 'wrap',
        height: 'auto',
    },

对于react-select组件渲染的Menu（Paper组件），我尝试了以下几种方式：

dialogPaper: {
        zIndex: 0,
        maxHeight:300,
        position: 'absolute',
        overflowY:'auto',
        marginTop: theme.spacing(1),
        left:0, right: 0
    },
    paper: {
        zIndex: 1000,
        maxHeight:300,
        position: 'absolute',
        overflow:'visible',
        overflowY:'auto',
        marginTop: theme.spacing(1),
        left:0, right: 0
    },

我的代码与 Material Docs 部分非常相似：

谢谢，杨

【问题讨论】：

标签： material-ui react-select

【解决方案1】：

<Dialog PaperProps={{style: {overflowY: 'visible'}}}>
<DialogContent style={{ overflowY: 'visible' }}>...</DialogContent>
</Dialog>

【讨论】：

overflowY: 'visible' 导致对话框的任何内容溢出，我认为解决方案只需要 react-select 组件溢出。