单击背景时，MUI 左侧边栏未关闭

【问题标题】：MUI leftsidebar is not closing when clicking on Backdrop单击背景时，MUI 左侧边栏未关闭
【发布时间】：2022-08-14 16:57:01
【问题描述】：

我们有一个 example 用于来自 material-ui 的抽屉。
但是当我们打开左侧边栏时，这个抽屉没有背景。所以我改变了他们的代码来获得背景。
上第 113 行，我们有variant=\"persistent\" 所以我把它改成variant=\"temporary\" 来获得背景效果。
但是如果我们点击背景，左侧边栏不会关闭。（你可以在这里用我的例子来测试它：https://codesandbox.io/s/serene-framework-7wgiqs?file=/demo.tsx，只需点击菜单图标，你就会看到左侧边栏）

标签： material-ui

【解决方案1】：

您可以在 MUI v5 的 Drawer 组件中使用 onClose={(_, reason) => reason === "backdropClick" && setOpen(false)}。

<Drawer
    sx={{
      width: drawerWidth,
      flexShrink: 0,
      "& .MuiDrawer-paper": {
        width: drawerWidth,
        boxSizing: "border-box"
      }
    }}
    variant="temporary"
    anchor="left"
    open={open}
    onClose={(_, reason) => reason === "backdropClick" && setOpen(false)}
  >

这是基于您的代码的工作codesanbox。

【讨论】：

亲爱的，您已将onClick 附加到Drawer 本身。因此，如果我们单击左侧边栏的任何部分，它将关闭。但我只想在我们点击背景时关闭抽屉。
好的，我现在理解得更好了@Abhishekkamal，我已经更新了我的代码和沙箱，如果有帮助，请告诉我。