如何为Material UI表格展开区域的首行和末行添加边框样式？

问题核心特征 #

• 已实现可展开行功能，行展开后渲染平级子行列表
• 目标效果：每组展开的子行列表首行加上边框、末行加下边框
• 已尝试nth-of-type、first-child、last-child选择器，仅背景色可修改，边框样式不生效

失效原因 #

1. 选择器匹配逻辑错误：React Table渲染的展开子行与父行在DOM中平级，没有独立包裹子行的父容器，全局子元素选择器只会匹配整个表格的首尾行，无法定位到每组子行的首尾节点。
2. 样式挂载节点错误：MUI Table组件默认将边框样式定义在TableCell节点上，直接给TableRow添加的边框样式会被单元格默认样式覆盖，因此仅行背景色可生效，边框无法显示。

实现方案 #

方案1：渲染逻辑判断（推荐，无兼容问题、稳定性最高） #

完全绕开CSS选择器匹配问题，在渲染子行时直接判断当前子行在所属子行组的位置，给对应单元格直接注入边框样式：

// 行渲染逻辑片段（React Table v7/v8逻辑通用）
const tableRows = useMemo(() => {
  const renderList = [];
  // 遍历当前页渲染的行
  pageRows.forEach(row => {
    // 先渲染父行
    renderList.push(<TableRow key={row.id} {...row.getRowProps()}>
      {/* 父行单元格渲染逻辑 */}
    </TableRow>);

    // 父行展开时渲染子行
    if (row.getIsExpanded()) {
      const subRows = row.subRows;
      subRows.forEach((subRow, subIndex) => {
        const isFirstSub = subIndex === 0;
        const isLastSub = subIndex === subRows.length - 1;
        renderList.push(
          <TableRow
            key={subRow.id}
            className="expanded-sub-row"
            sx={{
              // 边框必须加在子节点TableCell上，不能直接加在TableRow
              '& > .MuiTableCell-root': {
                borderTop: isFirstSub ? '1px solid #000' : 'none',
                borderBottom: isLastSub ? '1px solid #000' : 'none',
              }
            }}
            {...subRow.getRowProps()}
          >
            {/* 子行单元格渲染逻辑 */}
            {subRow.getVisibleCells().map(cell => (
              <TableCell key={cell.id} {...cell.getCellProps()}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </TableCell>
            ))}
          </TableRow>
        )
      })
    }
  })
  return renderList;
}, [pageRows])

方案2：纯CSS实现（适合不想修改JS渲染逻辑的场景） #

给所有子行添加统一类名expanded-sub-row，给展开状态的父行添加data-expanded="true"标记，通过相邻兄弟选择器匹配首尾子行：

/* 匹配展开父行后紧跟的第一个子行，加上边框 */
.MuiTableRow-root[data-expanded="true"] + .expanded-sub-row > .MuiTableCell-root {
  border-top: 1px solid #000;
}
/* 匹配子行序列的最后一个节点（后面紧跟非子行节点），加下边框 */
.expanded-sub-row:has(+ :not(.expanded-sub-row)) > .MuiTableCell-root {
  border-bottom: 1px solid #000;
}

注意：:has()伪类存在浏览器兼容要求，如需兼容低版本Chrome（<105）请优先使用方案1。

避坑说明 #

• 如果使用了MUI表格的stickyHeader、带边框变体，注意检查表格的border-collapse属性，避免边框出现错位、粗细不一致问题
• 若自定义边框被默认样式覆盖，可适当提升样式优先级，或在边框样式后追加!important
• 嵌套展开（子行内还有二级展开）场景下，方案1可通过递归判断层级实现多层级边框效果，比纯CSS方案适配成本低很多

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