如何调整MUI V5 Drawer滑入动画起始位置（适配侧边栏宽度）

你当前的配置已经把Drawer的最终位置固定在侧边栏右侧，但动画仍基于屏幕左边缘计算——原因是MUI默认的Drawer动画通过transform: translateX(-100%)（关闭）到transform: translateX(0)（打开）实现，未考虑侧边栏宽度。只需修改动画的transform起止值，让Drawer从侧边栏左侧滑入即可：

解决方案代码 #

// 替换为你实际的侧边栏和Drawer宽度
const sideNavWidth = 240; 
const drawerWidth = 320;

createTheme({
  components: {
    MuiDrawer: {
      defaultProps: {
        ModalProps: {
          slotProps: {
            backdrop: {
              style: {
                backgroundColor: "transparent",
              },
            },
          },
        },
      },
      styleOverrides: {
        paper: {
          padding: "0px",
          left: sideNavWidth,
          width: drawerWidth,
          // 保留MUI默认动画曲线保证流畅度
          transition: "transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms",
          // 关闭状态：Drawer向左偏移自身宽度，隐藏在侧边栏左侧
          transform: `translateX(-100%)`,
        },
        // 打开状态：重置transform，让Drawer滑到侧边栏右侧的目标位置
        paperAnchorLeft: {
          '&.MuiDrawer-open': {
            transform: 'translateX(0)',
          },
        },
      },
    },
  },
});

核心逻辑说明 #

• 固定最终位置：通过left: sideNavWidth确保Drawer打开后紧贴侧边栏右侧。
• 调整关闭位置：用transform: translateX(-100%)让Drawer向左偏移自身宽度，刚好隐藏在侧边栏左侧（实际位置为sideNavWidth - drawerWidth）。
• 绑定状态动画：通过&.MuiDrawer-open选择器控制打开时的transform值，实现从侧边栏左侧滑入的视觉效果。

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