如何在 MUI 抽屉打开时删除 paddingRight

Question

我的问题很简单，但我不知道如何解决这个问题，当打开 MaterialUI 的抽屉时，会在我的页面主体中添加一些 css，其中一个 css 添加一个 padding-right ，这会拧紧页面缩进。

抽屉关闭：

抽屉打开：

问题：

代码：

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

样式仅添加颜色。

Answer 1

我修复了将“disableScrollLock={ true }”添加到抽屉组件中的问题:)