材質UI中的修剪抽屜

Question

根據docs，material-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財產高達AppBar的高度，但沒有我需要的這種行爲是什麼。

有什麼辦法可以達到這個目的嗎？

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。