React+TypeScript项目Material UI Collapse组件timeout不生效如何解决

• 核心问题：你在ProfileBio组件内部定义了CurrentContent、ShowMoreButton两个函数组件，每次组件状态更新（比如点击展开按钮修改expandBio）时，这两个内部组件都会被重新创建。React会判定它们是不同类型的组件，直接卸载原有实例、挂载新实例，Collapse的过渡动画没有执行机会，看起来就是瞬间完成展开/收起，和你设置的timeout数值无关。
• 次要问题：部分Material UI版本下，单独传字符串类型的easing值可能和自定义timeout存在兼容问题，导致超时配置不生效。

1. 不要把内部的渲染函数当成独立组件调用，改成直接执行函数即可，避免组件卸载重挂载：

// 原来的写法（错误）
<CardContent>
  <CurrentContent />
</CardContent>
<Box {/* 省略外层样式 */}>
  <ShowMoreButton />
</Box>

// 修改后的写法（正确）
<CardContent>
  {CurrentContent()}
</CardContent>
<Box {/* 省略外层样式 */}>
  {ShowMoreButton()}
</Box>

2. 建议将timeout和easing显式声明为包含进入、退出状态的对象，兼容性更好：

<Collapse
  sx={{ mt: 0 }}
  collapsedSize={72}
  in={expandBio}
  easing={{ enter: 'ease', exit: 'ease' }}
  timeout={{ enter: 1000, exit: 500 }} // 单位为毫秒，可按需求调整
  onEnter={() => console.log('entered')}
>
  {/* 内部内容省略 */}
</Collapse>

3. 不要给Collapse内部的Typography组件设置固定高度类（你代码中已经注释了className={bioHeight}，保持注释状态即可），避免干扰Collapse的高度计算逻辑。

补充说明：你代码中使用的edit状态没有声明定义，需要补上const [edit, setEdit] = useState(false);避免运行报错。

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