Clipped drawer in Material ui

Question

According to docs, material-ui supports persistant drawer.
But my expected behaviour is a clipped persistant drawer like the photo.

My Sidebar component:

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

So far, I've tried to make top property as much as AppBar's height but this behaviour wasn't what I needed.

Is there any way to achieve this?

Answer 1

您需要为document.write提供正确的样式。以the docs you provided：

为例

而不是：

AppBar

使用：

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

为什么const styles = theme => ({ ... appBar: { position: 'absolute', width: '100%', zIndex: '1400', }, ... }); 是1400？它只是一个任意数字，高于抽屉的zIndex，即zIndex。