Material 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。