javascript - Material-UI 中的 zDepth 不起作用 (React.js)

Question

也许我不明白 zDepth 的概念。我有带有渲染方法的组件:

render() {
  return (
    <div>
      <AppBar
        zDepth={2}
        title="Some title"
        iconElementLeft={<IconButton onClick={this.handleToggle}><NavigationClose /></IconButton>}
      />
      <Drawer
        open={this.state.open}
        width={200}
        zDepth={1}>
        <MenuItem>Menu Item</MenuItem>
        <MenuItem>Menu Item 2</MenuItem>
      </Drawer>
    </div>
  )
}

我希望 AppBar 将呈现在 Drawer 前面。但这样不行:

Result

Answer 1

在这种情况下，

zDepth 对您没有帮助。抽屉与其他经典组件有点不同。如果你想让你的Appbar始终在前面，你可以按照this issue进行以下操作:

Live example

render() {
  return (
    <div>
      <AppBar
        zDepth={2}
        title="Some title"
        iconElementLeft={<IconButton onClick={this.handleToggle}><NavigationClose /></IconButton>}
      />
      <Drawer
        open={this.state.open}
        width={200}
        zDepth={1}
        style={{ height: AppBar.height }}> // <== HERE
        <MenuItem>Menu Item</MenuItem>
        <MenuItem>Menu Item 2</MenuItem>
      </Drawer>
    </div>
  )
}