Material-UI的Drawer抽屉为什么点击遮罩层关不掉？

程序员欣龙提问于 2026-03-10 16:47:18 阅读 3

组件

我用Material-UI写了个临时抽屉（temporary Drawer），但点遮罩层（backdrop）的时候抽屉不会自动关闭，文档里说默认是能关的啊？是不是我哪里写错了？

我试过加了onClose，也确认了open状态是受控的，但还是不行。控制台也没报错，就是点外面没反应。

const [open, setOpen] = React.useState(false);

return (
  <Drawer
    open={open}
    onClose={() => setOpen(false)}
    variant="temporary"
  >
    <div>菜单内容</div>
  </Drawer>
);

我来解答赞 3 收藏

反馈

1 条解答

シ红爱 Lv1

兄弟，你这个代码看起来没毛病啊，variant="temporary" 确实默认支持点击遮罩层关闭的。

不过我见过类似的问题，十有八九是下面这几个原因：

最常见的是 Drawer 的父容器样式问题。如果父元素设置了 overflow: hidden 或者 position: relative，Modal 的遮罩层事件可能被拦截了。你可以把 Drawer 放到最外层去试试，或者给父容器加上 position: static。

另一个可能是 MUI 版本问题。如果你用的是 v5，试试把代码改成这样：

<Drawer

  open={open}

  onClose={() => setOpen(false)}

  variant="temporary"

  ModalProps={{

    onBackdropClick: () => setOpen(false)

  }}

>

  <div>菜单内容</div>

</Drawer>

v5 里面 explicit 一下 Modal 的 backdrop 点击处理更稳妥。

还有一种情况是你用了 Slide 或者其他过渡动画，然后动画还没结束就点遮罩层，这时候可能不触发 onClose。

你先试试加上 ModalProps 那段，如果还不行就把父容器的样式检查一下，十有八九是样式冲突的问题。

2026-03-10 18:22