抽屉在react material ui应用程序中重叠了Navbar，您知道如何更改吗？

问题描述

我想让抽屉在打开时不出现在导航栏后面。当前，抽屉正在覆盖导航栏。我试图在我的“样式”中使用z-index对其进行更改，但显然它不起作用（请参见屏幕截图）。我将导航栏的z-index设置为高于抽屉。

您能识别出我的错误吗？

这是抽屉.js：

import React from "react";
import clsx from "clsx";
import { makeStyles,useTheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",},drawer: {
    width: drawerWidth,zIndex: 400,flexShrink: 0,/*whiteSpace: "Nowrap",*/
  },drawerOpen: {
    width: drawerWidth,transition: theme.transitions.create("width",{
      easing: theme.transitions.easing.sharp,duration: theme.transitions.duration.enteringScreen,}),

这是我的navbar.js：

// import packages
import React,{ useContext,Fragment } from "react";
import { Link } from "react-router-dom";

// import local dependenceis
import logo from "./images/tubot_logo.png";
import AuthContext from "../../Context/Auth/authContext";

// import material-ui
import withStyles from "@material-ui/core/styles/withStyles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";


// styling
const styles = (theme) => {
  return {
    root: {
      flexGrow: 1,zIndex: 2000,title: {
      flexGrow: 1,fontFamily: "shadowsintolight",textdecoration: "none",color: "black",};

const Navbar = (props) => {
  // destructuring: styling props
  const {
    root,title,} = props.classes;

 

  // react: return jsx
  return (
    <div className={root}>
      <AppBar position="absolute" >
        <Toolbar>
          /*some navbar stuff*/
        </Toolbar>
      </AppBar>
    </div>
  );
};

解决方法

尝试像这样在classes组件上设置Drawer属性：

const App = () => {
  const classes = useStyles();
  return (
    <div className="App" className={root}>
      <AppBar position="absolute">
        <Toolbar>
          // Toolbar content...
        </Toolbar>
      </AppBar>
      <Drawer
        variant="persistent"
        anchor="left"
        open={true}
        classes={{
          paper: classes.drawer,}}>
        // Drawer content...
      </Drawer>
    </div>
  );
};