素材の切り抜きui

Question

docsによると、素材-uiは持続性の引き出しをサポートします。
しかし、私の予想される動作は、写真のようなクリッピングされた持続的な引き出しです。

マイサイドバーコンポーネント：

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { withStyles } from 'material-ui/styles'; 
import Drawer from 'material-ui/Drawer'; 
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'; 
import Face from 'material-ui-icons/Face'; 
import Person from 'material-ui-icons/Person'; 
import Assignment from 'material-ui-icons/Assignment'; 
import NavLink from 'react-router-dom/NavLink'; 
import { FormattedMessage } from 'react-intl'; 
import styles from '../../../../style/components/global/Sidebar.scss'; 

const cx = require('classnames/bind').bind(styles); 

const rootStyles = theme => ({ 
    list: { 
    width: 250, 
    flex: 'initial', 
    }, 
    drawer: { 
    top: 30, 
    }, 
}); 
class UndockedDrawer extends Component { 
    render() { 
    const { classes } = this.props; 
    const sidebarListItems = (
     <div> 
     <NavLink 
      to="/users" 
      className={cx('noStyle')} 
     > 
      <ListItem button> 
      <ListItemIcon> 
       <Person /> 
      </ListItemIcon> 
      <ListItemText primary={<FormattedMessage id="user" />} /> 
      </ListItem> 
     </NavLink> 
     </div> 
    ); 

    const sidebarList = (
     <div> 
     <List className={classes.list}> 
      {sidebarListItems} 
     </List> 
     </div> 
    ); 

    return (
     <div> 
     <Drawer 
      open={this.props.open} 
      onRequestClose={this.props.onRequestClose} 
      onClick={this.props.onRequestClose()} 
      type="permanent"> 
      {sidebarList} 
     </Drawer> 
     </div> 
    ); 
    } 
} 

export default withStyles(rootStyles)(UndockedDrawer); 

はこれまでのところ、私は、アプリケーションバーの高さは限りtopプロパティを作成しようとしましたが、この動作は、私は必要なものではなかったです。

これを達成する方法はありますか？

Answer 1

AppBarに適切なスタイルを指定する必要があります。 the docs you providedから例を取る：

の代わりに：

const styles = theme => ({ 
    ... 
    appBar: { 
    position: 'absolute', 
    width: `calc(100% - ${drawerWidth}px)`, 
    marginLeft: drawerWidth, 
    }, 
    ... 
}); 

用途：

const styles = theme => ({ 
    ... 
    appBar: { 
    position: 'absolute', 
    width: '100%', 
    zIndex: '1400', 
    }, 
    ... 
}); 

zIndexが1400であるのはなぜ？これはドロワーのzIndexより高い任意の数です。これは1300です。