MUI - 删除抽屉中的覆盖？答案

【问题标题】：MUI - Remove overlay in Drawer?MUI - 删除抽屉中的覆盖？
【发布时间】：2020-01-21 00:43:58
【问题描述】：

我正在尝试使用Drawer 组件，并且我注意到当抽屉被输入道具open={true} 时，底层页面/ div 上有一个默认的灰色叠加层。

是否有经过材料批准的最佳实践方法来消除调光？我在设置道具variant={"persistent"} 方面取得了部分成功。这会停止调光，但它也迫使我添加一个关闭按钮来关闭抽屉。

我正在寻找的是当在其边界之外单击时可以关闭的抽屉，并且在它打开时我想让调暗消失（不诉诸按钮来关闭抽屉）。

我查看了文档并尝试传递道具

variant={"持久"}

这消除了覆盖，但现在当我在抽屉外点击时它不会自动关闭。

<Drawer 
open={open}
anchor="top"
onClose={toggleDrawer}
variant={"persistent"}
modal={true}
>

我想让调光消失（不借助按钮）。

是否有任何经材料批准的选项？我可以尝试 CSS hack，但我不想破坏 Material 的 CSS 或出现闪烁的叠加层。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以添加BackdropProps={{ invisible: true }}。

工作示例：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import Button from "@material-ui/core/Button";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";

const useStyles = makeStyles({
  list: {
    width: 250
  }
});

export default function TemporaryDrawer() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false
  });

  const toggleDrawer = (side, open) => event => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [side]: open });
  };

  const sideList = side => (
    <div
      className={classes.list}
      role="presentation"
      onClick={toggleDrawer(side, false)}
      onKeyDown={toggleDrawer(side, false)}
    >
      <List>
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  return (
    <div>
      <Button onClick={toggleDrawer("left", true)}>Open Left</Button>
      <Drawer
        BackdropProps={{ invisible: true }}
        open={state.left}
        onClose={toggleDrawer("left", false)}
      >
        {sideList("left")}
      </Drawer>
    </div>
  );
}