Material UI 5 Collapse组件宽度与动画异常问题

1. 修复展开动画不流畅问题 #

Collapse组件展开动画卡顿，多是因为容器高度计算异常导致。给Collapse添加overflow: hidden样式，能让浏览器准确计算容器高度，保证动画过渡平滑：

<Collapse in={open} sx={{ overflow: "hidden" }}>

同时避免给子元素Box设置外边距（margin），如果需要间距，改用内边距（padding）或MUI内置的mt/mb这类间距属性，防止外边距干扰Collapse的高度计算逻辑。

2. 让子Box占满Collapse容器宽度 #

直接给Box组件设置width: 100%，通过sx属性实现即可：

<Box sx={{ width: "100%", p: 2, bgcolor: "background.paper", mt: 1 }}>

修改后的完整代码示例 #

import * as React from "react";
import { Button, Collapse, Box } from "@mui/material";

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <div style={{ maxWidth: 400, margin: "20px auto" }}>
      <Button
        variant="outlined"
        onClick={() => setOpen(!open)}
        sx={{ width: "100%" }}
      >
        {open ? "收起" : "展开"}
      </Button>
      <Collapse in={open} sx={{ overflow: "hidden" }}>
        <Box sx={{ width: "100%", p: 2, bgcolor: "background.paper", mt: 1 }}>
          这是折叠面板里的内容，现在宽度会占满容器，展开动画也会更流畅。可以添加更多测试内容来验证：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Box>
      </Collapse>
    </div>
  );
}

原因说明 #

• 动画流畅度：overflow: hidden强制Collapse容器裁剪超出内容，确保动画过程中高度计算始终基于容器内部实际内容，消除外部间距导致的计算偏差。
• 宽度占满：Box组件默认宽度由内容决定，显式设置width: 100%可让它继承父容器Collapse的宽度，实现占满效果。

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