Javascript 物料界面：如何将抽屉组件置于AppBar下方

我正在玩Material UI抽屉组件，我希望抽屉位于appbar下方，在这里我想切换汉堡图标的onclick以打开和关闭，当我单击汉堡图标时，它应该打开下面的抽屉，再次单击它也应该关闭，我不希望汉堡图标移动onclick，它应该在一个地方是静态的。它不应该移动，只有抽屉应该打开和移动。我如何在物料界面中实现它

从“React”导入React；
从“clsx”导入clsx；
从“@materialui/core/styles”导入{makeStyles，useTheme}；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Mail”导入MailIcon；
常数抽屉宽度=240；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
},
appBar：{
transition:theme.transitions.create（['margin'，'width']{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
},
appBarShift：{
宽度：`calc（100%-${drawerWidth}px）`，
页边左侧：抽屉宽度，
transition:theme.transitions.create（['margin'，'width']{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen，
}),
},
菜单按钮：{
边缘光：主题。间距（2），
},
隐藏：{
显示：“无”，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
抽屉阅读器：{
显示：“flex”，
对齐项目：“居中”，
填充：主题。间距（0，1），
//内容必须位于应用程序栏下方
…theme.mixins.toolbar，
justifyContent:“柔性端”，
},
内容：{
flexGrow:1，
填充：主题。间距（3），
过渡：theme.transitions.create（'margin'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen，
}),
边缘左侧：-抽屉宽度，
},
contentShift：{
过渡：theme.transitions.create（'margin'{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen，
}),
marginLeft:0，
},
}));
导出默认函数PersistentDrawerLeft（）{
const classes=useStyles（）；
const theme=useTheme（）；
const[open，setOpen]=React.useState（false）；
常量handleDrawerOpen=（）=>{
setOpen（真）；
};
常量handleDrawerClose=（）=>{
setOpen（假）；
};
返回(
持久抽屉
{['Inbox'，'Starred'，'Send email'，'Drafts'].map（（文本，索引）=>(
{索引%2==0？：}
))}
{['All mail'，'Trash'，'Spam'].map（（文本，索引）=>(
{索引%2==0？：}
))}
Lorem ipsum dolor sit amet，是一位杰出的职业经理人，他是一位临时雇员
我们的劳动和财富是巨大的，我们的财富是不可替代的
设施为利奥·维勒·里苏斯（ultrices mi tempus imperdiet）。亨德雷特（hendrerit）的森佩尔·里苏斯（Semper Risus）
妊娠期芸香属非黄花芸香，黄花芸香属黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属，黄花芸香属
多奈克·尤里塞斯。奥迪奥·莫尔比·奎斯·奥迪奥·埃尼安·阿梅特·尼塞尔·苏西比特
这是一个不可数的整数，它是一个可以活下去的整数。
狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座狮子座
在奥古斯都，在奥古斯都，在奥古斯都，在奥古斯都，在奥古斯都
在圣殿里，人们用各种各样的口头禅来表达自己的心声
donec massa sapien faucibus et molestie ac。
毛里斯·努克（mauris nunc）委员会的研究结果表明，这是一种生活方式
肺动脉直径为1/2的尊严设施
tincidunt。Ornare suspendisse sed nisi lacus sed viverra tellus。Purus坐在阿梅特·帕特的座位上
莫里斯会议。莫尔比会议上的欧盟设施元素。莫里斯会议上的拉齐尼亚会议
死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神，死亡之神
亨德雷特孕妇rutrum quisque non tellus orci ac.Pellentsque nec nam aliquam sem et
tortor.居住者morbi tristique Sentectus和Adipising Elite duis tristique sollicitudin
nibh sit。Ornare aenean euismod elementum nisi quis eleifend。Commodo viverra maecenas
面部积陷性腔隙。睾丸矢状肌不等长。
);
}

我想把抽屉放在吧台下面

要将

抽屉

放在

AppBar

下方，请在

AppBar

样式中添加以下行：

appBar:{
zIndex:theme.zIndex.drawer+1，//添加此行以增加appBar z索引
},

应该是stati

import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  appBar: {
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: -drawerWidth,
  },
  contentShift: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  },
}));

export default function PersistentDrawerLeft() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open,
        })}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            className={clsx(classes.menuButton, open && classes.hide)}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            Persistent drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="persistent"
        anchor="left"
        open={open}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.drawerHeader}>
          
        </div>
        <Divider />
        <List>
          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {['All mail', 'Trash', 'Spam'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
      <main
        className={clsx(classes.content, {
          [classes.contentShift]: open,
        })}
      >
        <div className={classes.drawerHeader} />
        <Typography paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
          facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
          gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
          donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
          Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
          imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
          arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
          donec massa sapien faucibus et molestie ac.
        </Typography>
        <Typography paragraph>
          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
          facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
          tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
          consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
          vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
          hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
          tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
          nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
          accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
        </Typography>
      </main>
    </div>
  );
}