如何实现Material UI侧边栏平滑滑入滑出并推送主内容？

1. 修复侧边栏过渡动画失效 #

你的CSS逻辑没问题，但Material UI组件可能因**默认布局属性（如display: none）**或层级样式覆盖导致动画不生效。改用MUI的styled或sx属性控制过渡，确保侧边栏始终处于渲染状态（仅通过transform切换位置）：

import { styled } from '@mui/material/styles';

const StyledSidebar = styled('div')(({ theme, isOpen }) => ({
  position: 'fixed',
  top: 0,
  left: 0,
  width: '250px',
  height: '100vh',
  transition: 'transform 0.3s ease-in-out',
  transform: isOpen ? 'translateX(0)' : 'translateX(-250px)',
  zIndex: theme.zIndex.drawer,
}));

如果使用MUI内置Drawer组件，直接利用variant="persistent"属性配合open状态，MUI会自动处理过渡：

<Drawer
  variant="persistent"
  open={isOpen}
  sx={{
    '& .MuiDrawer-paper': {
      width: 250,
      transition: 'transform 0.3s ease-in-out',
    },
  }}
>
  {/* 侧边栏内容 */}
</Drawer>

2. 解决主内容布局异常问题 #

给主内容区域添加动态边距，配合侧边栏的展开/收起状态同步过渡：

<Box sx={{ marginLeft: isOpen ? 250 : 0, transition: 'margin-left 0.3s ease-in-out' }}>
  {/* 主内容 */}
</Box>

若使用Drawer的variant="persistent"模式，主内容会自动被推送，无需手动设置边距。

3. 修改侧边栏颜色 #

通过sx属性直接设置，或自定义MUI主题统一配置：

• 直接设置：

<StyledSidebar isOpen={isOpen} sx={{ backgroundColor: '#2d3748', color: '#fff' }}>
  {/* 内容 */}
</StyledSidebar>

• 主题自定义：

const theme = createTheme({
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: '#2d3748',
          color: '#fff',
        },
      },
    },
  },
});

4. 固定触发按钮位置 #

给按钮添加固定定位样式，脱离文档流不随页面滚动：

<IconButton
  onClick={() => setIsOpen(!isOpen)}
  sx={{
    position: 'fixed',
    top: 16,
    left: 16,
    zIndex: 1300, // 确保层级高于侧边栏
    backgroundColor: '#fff',
  }}
>
  <MenuIcon />
</IconButton>

5. 实现侧边栏选中后状态可配置功能 #

添加状态变量存储用户偏好，配合开关组件让用户选择是否关闭：

import { Switch, FormControlLabel } from '@mui/material';

// 状态定义
const [isOpen, setIsOpen] = useState(false);
const [closeOnSelect, setCloseOnSelect] = useState(true);

// 菜单项点击逻辑
const handleMenuItemClick = () => {
  if (closeOnSelect) setIsOpen(false);
  // 其他业务逻辑
};

// 页面中添加开关选项
<FormControlLabel
  control={<Switch checked={closeOnSelect} onChange={(e) => setCloseOnSelect(e.target.checked)} />}
  label="选中菜单项后关闭侧边栏"
/>

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