我正在嘗試將 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>
);
};
以正確的格式洗掉折疊結果。例如當前狀態是：
想要的結果（展開后是）
uj5u.com熱心網友回復：
問題是<Collapse />組件是一個div，div不能環繞表格行。您需要在 Collapse 內制作第二個表格，并對齊單元格，使它們的大小相同。
代碼沙盒演示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397935.html
標籤：javascript css 反应 材质-ui