Material UI v5.1.1持久化左侧抽屉打开时右侧内容未收缩如何解决

核心问题并非open参数未被识别，而是Persistent Drawer本身不会自动修改主内容区域的布局偏移，需要手动绑定状态实现联动效果，具体操作步骤如下：

• 第一步：确认抽屉基础配置正确，声明固定抽屉宽度，绑定open状态，且variant属性设置为persistent

import { useState } from 'react';
import { Drawer, Box } from '@mui/material';

// 自定义抽屉宽度，需全局统一使用
const DRAWER_WIDTH = 240;

export default function Layout() {
  // 抽屉开关状态
  const [open, setOpen] = useState(false);

  return (
    // 外层根容器必须设置为flex布局
    <Box sx={{ display: 'flex' }}>
      <Drawer
        sx={{
          width: DRAWER_WIDTH,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: DRAWER_WIDTH,
            boxSizing: 'border-box',
          },
        }}
        variant="persistent"
        anchor="left"
        open={open}
      >
        {/* 抽屉内部内容 */}
      </Drawer>

• 第二步：给右侧主内容容器添加动态样式，根据open状态修改边距和宽度，实现收缩效果

<Box
        component="main"
        sx={{
          flexGrow: 1,
          padding: 3,
          // 抽屉关闭时的默认样式
          marginLeft: `-${DRAWER_WIDTH}px`,
          transition: (theme) => theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
          // 抽屉打开时的偏移样式
          ...(open && {
            marginLeft: 0,
            width: `calc(100% - ${DRAWER_WIDTH}px)`,
            transition: (theme) => theme.transitions.create(['margin', 'width'], {
              easing: theme.transitions.easing.easeOut,
              duration: theme.transitions.duration.enteringScreen,
            }),
          }),
        }}
      >
        {/* 右侧页面内容 */}
      </Box>
    </Box>
  );
}

• 第三步：排查常见配置错误
  • 检查Drawer的variant属性是否错误设置为temporary，临时抽屉默认悬浮在内容上方，不会挤压主内容
  • 检查所有用到DRAWER_WIDTH的位置数值是否一致，避免偏移量不匹配
  • 检查open状态的更新逻辑是否正确，点击开关按钮时可以通过console.log打印open值校验状态是否正常变化

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