Material UI Drawer仅显示遮罩不滑入的问题求助

先给你列几个最常见的原因，对着你的代码挨个查：

• 状态没绑定对：Drawer的open状态是控制显示/隐藏的核心，你得用useState存这个状态，点击菜单图标时要正确切换它。比如：

  const [drawerOpen, setDrawerOpen] = useState(false);
  // 点菜单图标触发打开
  const openDrawer = () => setDrawerOpen(true);
  // 点遮罩或关闭按钮触发关闭
  const closeDrawer = () => setDrawerOpen(false);
  

  然后必须把Drawer组件的open属性绑上这个状态：<Drawer open={drawerOpen} onClose={closeDrawer}>，没绑的话肯定不会弹出来。

• Drawer里没放内容：你要显示Home、About这些选项，得在Drawer标签里加对应的List组件啊！空的Drawer当然看不见东西，官方示例里是有内部结构的，比如：

  <Drawer open={drawerOpen} onClose={closeDrawer}>
    <div style={{ width: 240 }}>
      <List>
        <ListItem button>
          <ListItemIcon><HomeIcon /></ListItemIcon>
          <ListItemText primary="Home" />
        </ListItem>
        <ListItem button>
          <ListItemIcon><InfoIcon /></ListItemIcon>
          <ListItemText primary="About" />
        </ListItem>
        <ListItem button>
          <ListItemIcon><MailIcon /></ListItemIcon>
          <ListItemText primary="Connect" />
        </ListItem>
      </List>
    </div>
  </Drawer>
  

  要是你只写了<Drawer />没加这些内容，自然看不到侧边栏选项。

• 事件绑错了：检查你的MenuRoundedIcon的点击事件，是不是绑成了关闭抽屉的函数？比如本来该绑openDrawer，结果写成closeDrawer，那点一下就触发关闭（但初始状态是关的，就只会弹出遮罩），再点又恢复。

• 层级被挡住了：页面变灰说明遮罩层出来了，但Drawer可能被其他元素盖住了。检查Drawer的样式，有没有被父组件的overflow: hidden或者更低的z-index给裁掉了，给Drawer加个高一点的z-index试试。

• 版本不兼容：你复制的官方代码如果是MUI v4的，但你装的是v5，API会有差异，比如v4的Drawer用variant="persistent"，v5可能有变化，核对一下你用的MUI版本和文档版本是不是一致。

另外再检查这几点：

1. NavBar组件里有没有正确导入MUI的相关组件？比如Drawer、List、ListItem这些，没导入的话会报错或者不渲染。
2. 如果状态是放在App.js里的，有没有把状态和修改函数传给NavBar组件？比如<NavBar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />，没传的话NavBar控制不了状态。

内容的提问来源于stack exchange，提问作者Branden Jones