当 material ui 表格行展开时，页面布局上移是因父容器未预留空间所致；通过为外层容器设置固定最大高度与垂直滚动，可确保表格锚点稳定、仅向下扩展内容。
当 material ui 表格行展开时，页面布局上移是因父容器未预留空间所致；通过为外层容器设置固定最大高度与垂直滚动，可确保表格锚点稳定、仅向下扩展内容。
在使用 Material UI 的 Collapse 实现可折叠表格（Collapsible Table）时，一个常见且影响用户体验的问题是：点击展开某一行后，整个表格或页面内容向上“跳动”。其根本原因在于：Collapse 组件默认采用 CSS 动画 + 高度过渡（height: 0 → auto），但父级容器（如 TableContainer 或外层 Box）未设定明确的高度约束，导致 DOM 高度突增时，浏览器重排（reflow）引发上方元素位置偏移。
✅ 正确解法不是修改 Collapse 本身，而是控制其父容器的尺寸行为：为其设定 maxHeight 并启用 overflowY: 'auto'，使内容超出时自动出现滚动条，而非撑开整个文档流。
以下是在原示例基础上的关键修复（仅需修改 CollapsibleTable 组件的外层 Box）：
export default function CollapsibleTable() {
return (
<Box sx={{ maxHeight: '70vh', overflowY: 'auto' }}>
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell />
<TableCell>Dessert</TableCell>
</TableRow>
</TableHead>
<TableBody>
<Row />
</TableBody>
</Table>
</TableContainer>
</Box>
);
}? 注意事项与优化建议：
-
maxHeight值应根据实际布局灵活调整（如'60vh'、'500px'），避免过小导致滚动体验生硬，或过大失去约束效果； - 若表格需支持多行同时展开，建议将
maxHeight应用于TableContainer或Paper更合理（而非最外层Box），例如：<TableContainer component={Paper} sx={{ maxHeight: '60vh', overflowY: 'auto' }}> - 确保
Collapse的timeout="auto"和unmountOnExit保持启用，以兼顾性能与动画平滑性； - 若需更精细控制（如展开时保留滚动位置），可结合
useRef与scrollIntoView({ block: 'nearest' })实现智能定位。
该方案不侵入 Row 内部逻辑，符合 Material UI 推荐的容器化布局思想，简洁、可靠且易于维护。
