我正在使用withStyles
为<AppBar>
设置一个较大的z-index值(它的值为theme.zIndex.modal + 2
,计算结果为1202
)。
这样做的原因是确保我的<Drawer>
组件在打开时始终隐藏在<AppBar>
后面(即被裁剪的抽屉)。
然而,当我在我的appbar中渲染一个<Select>
组件时,“下拉”div没有足够大的z-index值来显示,因此它最终被隐藏在appbar后面。
一个基本的例子如下:
let Test = ({classes}) => (
<AppBar className={classes.appbar} elevation={2} position='relative'>
<Toolbar>
<Select>
<MenuItem>{"Item 1"}</MenuItem>
<MenuItem>{"Item 2"}</MenuItem>
</Select>
</Toolbar>
</AppBar>
)
const styles = theme => ({
appbar: {
zIndex: theme.zIndex.modal + 2,
margin: 0
}
})
Test = withStyles(styles)(Test);
覆盖任何<Select>
暴露的类的z-index似乎无法解决我的问题。我该如何确保<Select>
出现在<AppBar>
的前面?
<Select>
公开元素上的z-index都无法解决我的问题。可能是因为它正在使用<Modal>
。此外,您的代码片段需要额外的花括号。 - sookie