如何在React MUI表格中嵌套折叠行并保持样式一致性

问题背景 #

需要实现带边框色和背景色的Material UI表格，要求每个主行包含可折叠子行。官方文档采用分离行+React.Fragment的方案，但主行与折叠行分离导致背景、边框样式仅作用于主行，展开后样式断裂；直接嵌套折叠行引发UI异常，条件移除边框的方案仍残留间隙，无法达到预期效果。

核心解决方案：利用rowspan合并单元格+嵌套子内容实现样式连贯 #

通过让主行的关键单元格在展开时跨两行，同时将折叠内容嵌套在主行单元格内，让主行与子内容共享样式，避免分离行带来的样式断层。

1. 调整主行单元格的rowspan属性

在主行的非触发折叠列上，根据展开状态设置rowspan：展开时设为2，折叠时设为1。这些单元格会跨越主行和子内容的视觉区域，边框和背景自然连贯。

2. 嵌套折叠内容到主行单元格

将折叠内容放在主行的某个单元格内（如最后一列），用条件渲染控制显示，同时通过自定义样式模拟表格行布局，确保与主行样式统一。

代码示例

import { useState, Fragment } from 'react';
import { Table, TableRow, TableCell, IconButton, Box, ExpandMore, ExpandLess } from '@mui/material';

const CollapsibleTable = () => {
  const [expanded, setExpanded] = useState({});

  const handleToggle = (id) => {
    setExpanded(prev => ({ ...prev, [id]: !prev[id] }));
  };

  const rows = [
    { id: 1, col1: '主行1列1', col2: '主行1列2', subRows: [{ sub1: '子行1项1', sub2: '子行1项2', sub3: '子行1项3' }] },
    { id: 2, col1: '主行2列1', col2: '主行2列2', subRows: [{ sub1: '子行2项1', sub2: '子行2项2', sub3: '子行2项3' }] },
  ];

  return (
    <Table sx={{ borderCollapse: 'collapse', width: '100%' }}>
      {/* 表头 */}
      <TableRow>
        <TableCell sx={{ border: '1px solid #ddd', padding: '12px' }}>展开按钮</TableCell>
        <TableCell sx={{ border: '1px solid #ddd', padding: '12px' }}>列1</TableCell>
        <TableCell sx={{ border: '1px solid #ddd', padding: '12px' }}>列2</TableCell>
        <TableCell sx={{ border: '1px solid #ddd', padding: '12px' }}>列3</TableCell>
      </TableRow>
      {/* 表体行 */}
      {rows.map(row => (
        <TableRow 
          key={row.id}
          sx={{ 
            backgroundColor: '#f5f5f5',
            '&:hover': { backgroundColor: '#eeeeee' }
          }}
        >
          <TableCell sx={{ border: '1px solid #ddd', padding: '12px' }}>
            <IconButton onClick={() => handleToggle(row.id)} size="small">
              {expanded[row.id] ? <ExpandLess /> : <ExpandMore />}
            </IconButton>
          </TableCell>
          <TableCell 
            sx={{ border: '1px solid #ddd', padding: '12px' }}
            rowspan={expanded[row.id] ? 2 : 1}
          >
            {row.col1}
          </TableCell>
          <TableCell 
            sx={{ border: '1px solid #ddd', padding: '12px' }}
            rowspan={expanded[row.id] ? 2 : 1}
          >
            {row.col2}
          </TableCell>
          <TableCell sx={{ border: '1px solid #ddd', padding: '12px' }}>
            {expanded[row.id] && (
              <Box 
                sx={{ 
                  borderTop: '1px solid #ddd',
                  marginTop: '12px',
                  padding: '12px',
                  backgroundColor: '#f5f5f5',
                  display: 'grid',
                  gridTemplateColumns: 'repeat(3, 1fr)',
                  gap: '12px'
                }}
              >
                {row.subRows.map((sub, idx) => (
                  <Fragment key={idx}>
                    <Box>{sub.sub1}</Box>
                    <Box>{sub.sub2}</Box>
                    <Box>{sub.sub3}</Box>
                  </Fragment>
                ))}
              </Box>
            )}
          </TableCell>
        </TableRow>
      ))}
    </Table>
  );
};

export default CollapsibleTable;

关键样式说明

• borderCollapse: 'collapse'：确保表格边框无缝衔接，消除默认间隙。
• rowspan：让主行单元格跨越多行，视觉上包裹子内容，避免样式断裂。
• 嵌套子内容的borderTop：模拟行分隔线，与主行边框自然衔接；背景色与主行保持一致，确保展开后视觉统一。

方案优势 #

• 主行与子内容共享样式，展开/折叠状态下边框、背景无断裂。
• 无需分离行结构，避免分离行带来的样式冲突和间隙问题。
• 布局逻辑清晰，易于维护和扩展。

内容的提问来源于stack exchange，提问作者Rana Faraz