我是 Material UI 和 React 的新手,在其他问题上没有发现 .我正在尝试使用 React-Select 组件开发对话框 Material UI。问题是 Dialog 上的 react-select 菜单被 Dialog Action 组件隐藏了。
My Dialog Component
react-select 组件下方的这一行是 react-select 渲染的 Paper 组件。
我尝试了一些 CSS 代码,例如 zIndex 和位置,但仍然没有找到显示菜单的方法,或者更好的是,让菜单(Paper 组件)覆盖 Dialog Action 组件。
我的对话框、对话框内容和对话框操作使用以下 className:
dialog: {
zIndex:0,
display:'flex',
flex:1,
flexGrow:1,
flexDirection:'column',
flexWrap: 'wrap',
height: 'auto',
},
对于react-select组件渲染的Menu(Paper Component),我尝试了以下方法:
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 部分非常相似:
谢谢,
杨
最佳答案
<Dialog PaperProps={{style: {overflowY: 'visible'}}}>
<DialogContent style={{ overflowY: 'visible' }}>...</DialogContent>
</Dialog>
关于material-ui - React-select 菜单被 Dialog Content 和 Dialog Action 组件隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56692926/