reactjs - 抽屉组件后面的material-ui覆盖div

Question

我在 React 应用程序中使用material-ui。我正在使用侧面菜单“抽屉”组件，但无法弄清楚如何在打开的菜单后面包含半透明背景覆盖层。

http://www.material-ui.com/#/components/drawer

Answer 1

停靠的示例展示了没有背景的抽屉。

未停靠的示例为抽屉提供了一个半透明背景，单击时隐藏抽屉。

区别在于docked属性。如果为 true，则抽屉将停靠并且不会有背景。如果为 false，则背景将会出现。

import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';

export default class DrawerUndockedExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});

  render() {
    return (
      <div>
        <RaisedButton
          label="Open Drawer"
          onClick={this.handleToggle}
        />
        <Drawer
          docked={false}
          width={200}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
          <MenuItem onClick={this.handleClose}>Menu Item</MenuItem>
          <MenuItem onClick={this.handleClose}>Menu Item 2</MenuItem>
        </Drawer>
      </div>
    );
  }
}

查看Drawer demos and API docs了解更多信息。

注意:对于 future 的读者，这涉及到material-ui v0.x。最新版本Drawer在版本 1.0.0-beta24 中得到了极大的改进，并且更符合已发布的 Material Design standards .