MUI 可折叠表格在展开时压缩成一个单元格答案

【问题标题】：MUI Collapsible table squashed into one cell when expandedMUI 可折叠表格在展开时压缩成一个单元格
【发布时间】：2021-12-30 01:05:34
【问题描述】：

我正在尝试使用带有 Collapse 的 MUI 表来展开/折叠行。但是，当使用折叠时，展开的行会被压缩成一个单元格。如何将单元格与父表对齐？

 export default function App() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell />
          <TableCell>Header 1</TableCell>
          <TableCell>Header 2</TableCell>
          <TableCell>Header 3</TableCell>
          <TableCell>Header 4</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell onClick={() => setExpanded(!expanded)}>Expand</TableCell>
          <TableCell>A</TableCell>
          <TableCell>B</TableCell>
          <TableCell>C</TableCell>
          <TableCell>D</TableCell>
        </TableRow>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <TableRow>
            <TableCell />
            <TableCell>E</TableCell>
            <TableCell>F</TableCell>
            <TableCell>G</TableCell>
            <TableCell>H</TableCell>
          </TableRow>
        </Collapse>
      </TableBody>
    </Table>
  );
};

删除折叠会导致格式正确。例如当前状态是：

想要的结果（展开后是）

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

问题在于<Collapse /> 组件是一个div，并且div 不能环绕表格行。您需要在 Collapse 中创建第二个表格，并对齐单元格，使它们的大小都相同。

Codesandbox demo.

【讨论】：