How to clip Drawer underneath AppNar in Material UI without using deprecated makeStyles?

Question

I am currently using a latest React v18 with Material UI. makeStyles is now deprecated for this version of React in Material UI.

May I know how I can clip Drawer under the AppBar? There are many solutions, but all of which require makeStyles and it clashes with my React version.

Please see code here.

I want it to look like this, instead of the overlapping thing it's doing now:

Answer 1

Update

Not sure if it might achieve the desired result, but as a possible approach to completely clip Drawer under AppBar, perhaps try follow these steps in addition to adding zIndex.

Forked demo with modifications: codesandbox

First import and use CssBaseline component as it applies the recommended CSS resets by MUI (this will make AppBar fill the top area as intended by MUI):

More about CssBaseline

import CssBaseline from "@mui/material/CssBaseline";

  return (
    <Fragment>
      <CssBaseline />
  ...

Secondly, further style Drawer with sx so that it leave some space to be clipped by AppBar:

<Drawer
  anchor="left"
  open={anchorElNav["menu"]}
  onClose={toggleDropdown("menu", false)}
  sx={{
    zIndex: 1000,
    width: 150,
    [`& .MuiDrawer-paper`]: {
      pt: 9,
      width: 150,
    },
  }}
>
  <NavbarMenuDropdown
    toggleDropdown={toggleDropdown}
    navbarPages={navbarPages}
  />
</Drawer>

The outcome could be further styled to match the desired result, perhaps consider to reference this example by MUI, although it is for a permanent drawer.

Original

Perhaps try add zIndex to the Drawer, a basic option would be using the sx prop:

More about the sx prop in MUI: document

<Drawer
  // 👇 Maybe this should be "left" as shown in the picture?
  anchor="top"
  open={anchorElNav["menu"]}
  onClose={toggleDropdown("menu", false)}
  // 👇 Add this because app bar has z-index of 1100, drawer 1200 by default
  sx={{ zIndex: 1000 }}
>
  <NavbarMenuDropdown
    toggleDropdown={toggleDropdown}
    navbarPages={navbarPages}
  />
</Drawer>