Estoy creando una aplicación de una sola página (basada en Material-UI) con AppBar (+ ToolBar ) y Drawer . Por el momento, el Drawer se superpone a la AppBar de aplicaciones y bajo ninguna circunstancia puedo hacer que el Drawer se mueva hacia abajo, por lo que básicamente se coloca justo debajo de la AppBar de aplicaciones.

Intenté agregar algo de relleno, pero esto no hace nada. Estoy usando makeStyles para diseñar la mayoría de los componentes, y me pregunto si es posible colocar el Drawer debajo de la AppBar de aplicaciones.

¿Hay alguna forma de colocar el cajón debajo de la AppBar de aplicaciones?

Tengo mucho código, pero la función makeStyle es simple:

 const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, appBar: { zIndex: theme.zIndex.drawer + 1, }, title: { flexGrow: 1, }, toolbar: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: theme.spacing(0, 1), ...theme.mixins.toolbar, }, content: { flexGrow: 1, padding: theme.spacing(3), }, drawer: { paddingTop: 30 }, }));

y el componente principal (que incluye el Drawer :

 <div className={classes.root}> <AppBar position="absolute" > <Toolbar> <Typography component="h1" variant="h6" noWrap className={classes.title}> x </Typography> <Switch checked={isDarkTheme} onChange={handleThemeSwitch}/> <WbIncandescentIcon /> </Toolbar> </AppBar> <ServiceDrawer className={classes.drawer} onOperationSelected={onOperationSelect} serviceList={services} onDrawerOpen={onDrawerOpen} onDrawerClose={onDrawerClose}> </ServiceDrawer> <main className={classes.content}> <div className={classes.toolbar} /> {selectedOperation && <Operation operation={selectedOperation}/>} </main> </div>