Question

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

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

<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>

实际代码如下：

import React from "react";

import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Drawer from "@material-ui/core/Drawer";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";

import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";

const drawerWidth = 250;

const useStyles = makeStyles((theme: Theme) => {
  console.log(`drawer zindex: ${theme.zIndex.drawer}`);
  console.log(`Appbar zindex: ${theme.zIndex.appBar}`);

  return createStyles({
    root: {
      display: "flex"
    },
    appBar: {
      zIndex: theme.zIndex.drawer + 1
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0
    },
    drawerPaper: {
      width: drawerWidth
    },
    toolbar: theme.mixins.toolbar,
  }
  );

}

);

export default function AppHeader() {

  const [state, setState] = React.useState({
    sidenavOpen: false
  });

  const toggleSidenav = () => {
    const currentlyOpen = state.sidenavOpen;
    setState({...state, sidenavOpen: !currentlyOpen});
  }

  const classes = useStyles();

  console.log(JSON.stringify(classes));
    return (
        <div className={classes.root}>
            <CssBaseline />
            <AppBar position="fixed" className={classes.appBar}>
                <Toolbar>
                    <IconButton edge="start" color="inherit" onClick={toggleSidenav}>
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h5" >Astronomical Catalog Client (React)</Typography>
                </Toolbar>
            </AppBar>
            <Drawer
                className={classes.drawer}
                open={state.sidenavOpen}
                onClose={toggleSidenav}
                variant="temporary"
                classes={{
                  paper: classes.drawerPaper
                }}
                >
                <div className={classes.toolbar} />


            </Drawer>
        </div>
    );
}

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

反应MaterialUI裁剪的抽屉ZIndex不起作用

0 个答案: