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

Question

我正在使用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>的前面？

- sookie

Answer 1

你可以在 Material-UI 的所有组件上使用 style 属性。

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

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

- h1b9b

---

是的，我知道。那种样式会应用于根元素。但正如我所说，修改任何<Select>公开元素上的z-index都无法解决我的问题。可能是因为它正在使用<Modal>。此外，您的代码片段需要额外的花括号。 - sookie

Answer 2

您可以在抽屉组件上使用PaperProps来调整zindex，而不是更改Select组件的zindex。

- sai manish