React Table-MUI表格行包裹Box后单元格布局异常的修复方法

问题出在MUI表格的结构依赖上：TableBody的直接子元素必须是TableRow（对应HTML的<tr>行元素），直接用Box替代的话，浏览器无法识别这是表格行，会把所有TableCell挤到第一列。要保留Box包裹每行的需求，有两种可行方案：

方案1：用TableRow包裹Box #

保留表格原生的行结构，把Box放在TableRow内部来包裹单元格：

<TableContainer>
    <TableHeader>
        {/* 表头内容 */}
    </TableHeader>

    <TableBody>
        {data.map((item, index) => {
            return(
                <TableRow key={index}>
                    <Box>
                       <TableCell>{/* 单元格内容 */}</TableCell>
                       <TableCell>{/* 单元格内容 */}</TableCell>
                       <TableCell>{/* 单元格内容 */}</TableCell>
                    </Box>
                </TableRow>
            )
        })}
    </TableBody>
</TableContainer>

方案2：让Box渲染为表格行元素 #

利用MUI Box的component属性，指定它渲染为<tr>（表格行），这样既保留Box的样式能力，又符合表格结构要求：

<TableContainer>
    <TableHeader>
        {/* 表头内容 */}
    </TableHeader>

    <TableBody>
        {data.map((item, index) => {
            return(
                <Box component="tr" key={index}>
                   <TableCell>{/* 单元格内容 */}</TableCell>
                   <TableCell>{/* 单元格内容 */}</TableCell>
                   <TableCell>{/* 单元格内容 */}</TableCell>
                </Box>
            )
        })}
    </TableBody>
</TableContainer>

两种方案都能让单元格正确对应到表头列，同时满足用Box包裹每行的要求。

内容的提问来源于stack exchange，提问作者Haritha Thushanka