React MUI Collapse组件忽略timeout属性，无法实现平滑展开

Collapse 不需要特定父容器，但你遇到的瞬间显示/隐藏问题，通常是以下几个配置错误导致的：

• 错误使用条件渲染而非in属性
  不要用{isOpen && <Collapse>...</Collapse>}这种写法，这会直接卸载/挂载组件，跳过过渡动画。必须让Collapse始终存在，通过in属性控制展开状态：

  <Collapse in={isOpen} timeout={2000}>
    {/* 子选项Box */}
  </Collapse>
  

• 子元素无明确高度约束
  Collapse 是通过修改高度实现平滑过渡的，如果你的<Box>内部内容高度动态变化（比如子选项数量不固定），组件无法计算初始和目标高度，就会直接跳变。可以给子<Box>设置minHeight，或者确保内部元素有明确的高度值，也可以给Collapse添加collapsedSize="0"强制初始高度为0。

• CSS样式干扰过渡
  检查父元素或Collapse自身是否有干扰过渡的CSS：

  • 父元素不要设置overflow: visible（Collapse默认依赖overflow: hidden来裁剪内容）
  • 不要给Collapse或子元素强制设置height: auto，这会打断高度计算
  • 纵向展开时，父元素如果用display: flex，要确保设置flex-direction: column

正确实现示例（React+TypeScript） #

import { useState } from 'react';
import { Collapse, Box, List, ListItem, ListItemText } from '@mui/material';

const HamburgerMenu = () => {
  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);

  return (
    <Box sx={{ width: 250, bgcolor: '#f5f5f5' }}>
      <ListItem onClick={() => setIsSubMenuOpen(prev => !prev)}>
        <ListItemText primary="主菜单项" />
      </ListItem>
      <Collapse in={isSubMenuOpen} timeout={2000} collapsedSize="0">
        <Box sx={{ px: 2, py: 1, bgcolor: '#fff' }}>
          <List>
            <ListItem><ListItemText primary="子选项1" /></ListItem>
            <ListItem><ListItemText primary="子选项2" /></ListItem>
          </List>
        </Box>
      </Collapse>
    </Box>
  );
};

export default HamburgerMenu;

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