skip to Main Content

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> 
    </>
  )
}

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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>
        </>
      );
    }
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search