React MUI Drawer如何不覆盖页面内容并实现打开时推动内容偏移

1. Drawer推挤页面不覆盖内容的精简实现 #

核心逻辑是通过动态控制外层容器的内边距+过渡动画实现内容平滑位移，仅需少量代码改动即可实现需求，完整修改后代码如下：

// 顶部定义Drawer固定宽度，可根据需求调整数值
const DRAWER_WIDTH = 240;

<ThemeProvider theme={oclockTheme}>
  {/* 给main容器加动态内边距和过渡动画 */}
  <main sx={{
    transition: 'padding-left 0.3s ease',
    paddingLeft: showMenu ? `${DRAWER_WIDTH}px` : 0,
    position: 'relative'
  }}>
    <Drawer
      variant='temporary'
      open={showMenu}
      hideBackdrop
      {/* 设置Drawer和内部纸容器的宽度 */}
      sx={{
        width: DRAWER_WIDTH,
        '& .MuiDrawer-paper': {
          width: DRAWER_WIDTH,
          boxSizing: 'border-box',
        },
      }}
    >
      <List>
        <ListItem sx={{ justifyContent: 'center' }}>
          <img src={oclockLogo} alt="O'Clock logo" />
        </ListItem>
      </List>
      
      <Divider light />
      
      <List >
        <ListItem>
         Menu item
        </ListItem>
      </List>
    </Drawer>
    
    <Button onClick={() => setShowMenu(true)} variant="contained" color="primary">Teste</Button>
  </main>
</ThemeProvider>

2. SwipeableDrawer样式修改方法 #

SwipeableDrawer的样式修改逻辑和普通Drawer完全一致，通过sx属性指定内部.MuiDrawer-paper类的样式规则即可自定义任意样式，示例如下：

<SwipeableDrawer
  open={showMenu}
  onOpen={() => setShowMenu(true)}
  onClose={() => setShowMenu(false)}
  sx={{
    width: DRAWER_WIDTH,
    '& .MuiDrawer-paper': {
      width: DRAWER_WIDTH,
      backgroundColor: '#f0f0f0', // 自定义背景色
      borderRadius: '0 12px 12px 0', // 自定义右侧圆角
      boxShadow: '2px 0 8px rgba(0,0,0,0.1)', // 自定义阴影
      padding: '16px 8px' // 自定义内边距
    }
  }}
>
  {/* 内部内容和普通Drawer完全一致 */}
</SwipeableDrawer>

内容的提问来源于stack exchange，提问作者Fernando Ferreira