React中嵌套两个AppBar组件时的Drawer z-index层级问题求助

问题场景 #

使用MUI的mini-variant drawer方案实现双AppBar布局（顶部主头部、底部带Drawer的AppBar），但主头部左上角区域被Drawer覆盖，显示空白。

问题原因 #

• permanent类型的Drawer其Paper组件默认采用固定定位（fixed），z-index为theme.zIndex.drawer（默认值1200）
• 顶部主AppBar为静态定位（static），默认z-index为auto，层级低于Drawer，因此被覆盖

解决方案 #

给顶部主AppBar设置更高的z-index，确保其层级高于Drawer及附带Drawer的AppBar：

修改代码 #

找到主AppBar的代码块，添加sx属性设置z-index：

<MuiAppBar position="static" sx={{ zIndex: theme.zIndex.drawer + 2 }}>
  <Toolbar variant="dense">
    <IconButton
      size="large"
      edge="start"
      color="inherit"
      aria-label="menu"
      sx={{ mr: 2 }}
    >
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
      News
    </Typography>
  </Toolbar>
</MuiAppBar>

说明 #

• theme.zIndex.drawer + 2既保证了主AppBar层级高于Drawer（1200），也高于你给附带Drawer的AppBar设置的theme.zIndex.drawer +1
• 若不需要考虑附带Drawer的AppBar层级，直接设置zIndex: 1201也可生效

效果验证 #

修改后主AppBar的层级将高于Drawer，左上角的菜单按钮与标题会正常显示，不再被覆盖。

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