MUI左侧侧边栏点击Backdrop（遮罩层）无法关闭问题求助

云上老周

2026-4-27

解决Material-UI Drawer点击遮罩无法关闭的问题

我来帮你搞定这个侧边栏遮罩点击没反应的问题～

当你把Drawer的variant从persistent改成temporary后，理论上点击遮罩（Backdrop）应该自动关闭侧边栏，但问题出在你可能没给Drawer正确绑定关闭回调。temporary模式下，Material-UI会在点击遮罩、按下ESC键时触发onClose事件，但如果这个事件没有正确更新控制侧边栏显示的状态，就会出现点遮罩没反应的情况。

具体修复步骤：

确保你用useState管理一个控制侧边栏开关的状态（比如open）：

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

给Drawer组件添加onClose属性，在回调里把open设为false：

<Drawer
  variant="temporary"
  open={open}
  onClose={() => setOpen(false)} // 关键：处理关闭逻辑
  // 其他配置项（比如anchor="left"等）
>
  {/* 你的侧边栏内容 */}
</Drawer>

完整示例代码片段：

import { useState } from 'react';
import { Drawer, IconButton, List, ListItem, ListItemText } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';

function LeftSidebar() {
  const [open, setOpen] = useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <div>
      {/* 触发侧边栏的菜单按钮 */}
      <IconButton onClick={toggleDrawer}>
        <MenuIcon />
      </IconButton>
      {/* 左侧侧边栏Drawer */}
      <Drawer
        variant="temporary"
        anchor="left"
        open={open}
        onClose={() => setOpen(false)} // 点击遮罩时触发关闭
      >
        <List>
          {['Dashboard', 'Orders', 'Settings'].map((item) => (
            <ListItem button key={item}>
              <ListItemText primary={item} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </div>
  );
}

export default LeftSidebar;