如何在打开 MUI 抽屉时删除填充

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 }”的问题:)

Answer 2

如果您只想删除填充，请使用

sx

属性，即

sx={{ pr: 0 }}

。