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的前面。 但这不是这样的：

结果

Answer 1

在这种情况下， zDepth将无济于事。 抽屉与其他经典组件略有不同。 如果您希望Appbar始终位于最前面，则可以根据此问题执行以下操作：

现场例子

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