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

Posted 2023-02-22

【中文标题】抽屉组件后面的material-ui覆盖div

【英文标题】：material-ui overlay div behind Drawer Component

【发布时间】：2018-06-02 12:12:26

【问题描述】：

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

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

【参考方案1】：

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

未停靠的示例向抽屉展示了一个半透明的背景，当点击该抽屉时它会隐藏起来。

区别在于docked 属性。如果为 true，Drawer 将停靠并且没有背景。如果为 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 了解更多信息。

注意：对于未来的读者，这涉及到 material-ui v0.x。最新版本的Drawer 1.0.0-beta24 版本进行了大幅改进，更符合已发布的Material Design standards。

【讨论】：

docked 这些天似乎不是 Drawer 的道具。似乎找不到等价物。您知道当前的解决方案吗？

@Levitikon 我认为临时抽屉是当前的解决方案：material-ui.com/components/drawers/#temporary-drawer

【参考方案2】：

我发现这对我有用，我希望它有所帮助。 删除variant="persistent"