z素材のUIの深さが正しくありません（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> 
) 
} 

：私はrenderメソッドを持つコンポーネントを持っています。しかし、それはこのように動作しません：

Result

Answer 1

zDepthは、この場合には、あなたを助けにはなりません。引き出しは、他の古典的なコンポーネントとは少し異なります。あなたが前に、必ずあなたのアプリケーションバーをしたい場合は、以下の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> 
) 
}