Reactjs 反应材料夹在抽屉中锌不起作用

我有一个似乎很常见的问题：“裁剪”抽屉覆盖了AppBar组件

我正在尝试使用菜单汉堡图标打开抽屉。打开和关闭都很好。AppBar和抽屉组件的zindex以其默认值（分别为1100和1200）开始。不幸的是，当我单击按钮时，抽屉似乎是用1300的zindex（从devtools复制）创建的：

实际代码如下：

从“React”导入React；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/styles”导入{makeStyles，Theme，createStyles}”；
常数抽屉宽度=250；
const useStyles=makeStyles（（主题：主题）=>{
log（`drawer zindex:${theme.zindex.drawer}`）；
log（`Appbar-zindex:${theme.zindex.Appbar}`）；
返回createStyles({
根目录：{
显示：“flex”
},
appBar：{
zIndex:theme.zIndex.drawer+1
},
出票人：{
宽度：抽屉宽度，
flexShrink:0
},
抽屉纸：{
宽度：抽屉宽度
},
工具栏：theme.mixins.toolbar，
}
);
}
);
导出默认函数AppHeader（）{
常量[状态，设置状态]=React.useState({
sidenavOpen:false
});
const toggleSidenav=（）=>{
const currentlypopen=state.sidenavOpen；
设置状态（{…状态，sidenavOpen:！currentlyOpen}）；
}
const classes=useStyles（）；
log（JSON.stringify（classes））；
返回(
天文目录客户端（React）
);
}

这很可能是一个愚蠢的错误，但如果有人能指出这一点，我将不胜感激

<div role="presentation" class="MuiDrawer-root MuiDrawer-modal makeStyles-drawer-3" style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;">
<!-- content -->
</div>