如何修改Material-UI <Select>下拉div的z-index？

Question

我正在渲染一个<AppBar>具有大 z-index 值的（使用withStyles，它的值theme.zIndex.modal + 2计算为1202）。

这样做的原因是为了确保我的<Drawer>组件在打开时保持隐藏在后面<AppBar>（即夹住的抽屉）。

但是当我渲染一个<Select>组件时，“下拉”div 没有足够大的 z-index 值来显示，因此它最终隐藏在应用程序栏后面。

一个基本的例子如下：

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);

覆盖任何公开类上的 z-index<Select>似乎并不能解决我的问题。如何确保<Select>出现在前面<AppBar>？

Answer 1

您可以style在所有组件上使用该属性Material-UI

<Select style={{zIndex: X}}>
   ...
</Select>

参见：https: //v0.material-ui.com/#/components/select-field
有关所有可用样式属性的详细信息。