Material UI permanent drawer covers the navbar

Question

I don't know why the Drawer component does not obey the styling rules I specified. I.e., its width it not 17rem, on the one hand, and, I don't know why it exceeds its parent component borders, on the other hand. Here is the interesting code from the application:

const styles = {
  background: {
    display: 'flex',
    //flexDirection: 'row',
    height: '100vh',
    width: '100vw',
    backgroundColor: '#303030',
  },
  drawer: {
    width: '17rem',
  },
  toolbar: {
    justifyContent: 'space-between',
  },
  titles: {
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
  },
  btn: {
    color: 'inherit',
    outline: 'none',
    fontWeight: 500,
  },
}

function App() {
  return (
    <>
      <AppBar style={{ position: 'relative', zIndex: '1201' }}>
        <Toolbar style={styles.toolbar}>
          <div style={styles.titles}>
            <Typography variant='h5'>
              Naughty pie
            </Typography>
            <Typography sx={{marginLeft: '1rem'}}>
              @0.0.0
            </Typography>
          </div>
          <div>
            <Button style={styles.btn}>
                <GroupIcon style={{ margin: '2px' }} />
                USERS
            </Button>
              ...
          </div>
        </Toolbar>
      </AppBar>
      <div style={styles.background}>
        <Drawer variant='permanent' style={styles.drawer}>
          <List>
            <ListItemButton>
              <ListItemText primary='All Messages' />
            </ListItemButton>
          </List>
        </Drawer>
      </div> 
    </>
  )
}

Answer 1

Use this code.

import {
  AppBar,
  Toolbar,
  Typography,
  Button,
  Drawer,
  List,
  ListItemButton,
  ListItemText,
  Box,
} from "@mui/material";

export default function App() {
  const drawerWidth = "17rem";
  return (
    <>
      <Box
        sx={{
          display: "flex",
          height: "100vh",
          width: "100vw",
          backgroundColor: "red",
        }}
      >
        <AppBar
          position="fixed"
          sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
        >
          <Toolbar>
            <Box>
              <Typography variant="h5">Naughty pie</Typography>
              <Typography>@0.0.0</Typography>
            </Box>

            <Button variant="contained" color="success">
              USERS
            </Button>
          </Toolbar>
        </AppBar>

        <Drawer
          open
          variant="permanent"
          sx={{
            width: drawerWidth,
            flexShrink: 0,
            [`& .MuiDrawer-paper`]: {
              width: drawerWidth,
              boxSizing: "border-box",
            },
          }}
        >
          <Toolbar />
          <List>
            <ListItemButton>
              <ListItemText primary="All Messages" />
            </ListItemButton>
          </List>
        </Drawer>
      </Box>
    </>
  );
}

Answer 2

What do you want to do? first of all, I should say it's better to use a Box (import it from "@mui/material") component instead of a div HTML tag when you are using MUI and use an sx prop instead of a style prop

after that, look at your Drawer component, It has a "styles" prop, it is not correct, it should be style if you use it.

please give me more details about something you want to do.