Search code examples
reactjssassmaterial-ui

How to remove the paddingRight when a MUI Drawer is opened

My problem its quite simple but i not know how to solve that, when the Drawer from MaterialUI is opened are added some css into the body in my page, and one of the css add a padding-right and that are screwing the page indentation.

Drawer closed:

enter image description here

Drawer opened:

enter image description here

The problem:

enter image description here

Code:

<React.Fragment key={"menu-button"}  >
      <MenuIcon onClick={toggleDrawer(true)} />
      <Drawer
        anchor={"left"}
        open={state}
        onClose={toggleDrawer(false)}
        
      >
        <Box
          sx={{ width: 250, height: '100%'}}
          className={styles.background}
          role="presentation"
          onClick={toggleDrawer(false)}
          onKeyDown={toggleDrawer(false)}
        >
          <List>
            {['About me', 'Projects', 'Experience', 'Education'].map((text, index) => (
              <ListItem key={text} disablePadding>
                <ListItemButton className={styles.option}>
                  <ListItemIcon className={styles.optionIcon}>
                    {icons[index]}
                  </ListItemIcon>
                  <ListItemText primary={text} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
          
        </Box>
      </Drawer>
    </React.Fragment>

The styles are adding only colors.

Solution

  • I fixed adding "disableScrollLock={ true }" into the Drawer component :)