Question

我是Material UI和React的新手，并且没有发现关于此组合的其他问题。我正在尝试使用React-Select组件开发Dialog Material UI。问题是Dialog Action组件隐藏了Dialog上的react-select菜单。 My Dialog Component

react-select组件下方的这一行是由react-select呈现的Paper组件。

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

我的对话框，对话框内容和对话框操作使用以下className：

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

对于由react-select组件呈现的菜单（纸张组件），我尝试了以下方法：

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
    },

我的代码与“材料文档”部分非常相似：

谢谢，杨

Answer 1

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

对话框内容和对话框动作组件隐藏了反应选择菜单

1 个答案: