如何在Material-UI的TableRow组件之间添加行间距？

不生效原因 #

1. borderCollapse: separate 和 borderSpacing 是CSS中作用于<table>元素的属性，你将其写在TableRow的子元素选择器中，自然无法生效
2. 样式中写的spacing: 8是无效属性，这是MUI Box组件的专属Prop，不能直接写入CSS样式规则

解决方案1（推荐）：通过Table全局属性实现 #

通过调整Table的边框分离属性和边框间距直接控制行间距，是最符合CSS规范的实现方式：

1. 给Table组件添加专属样式：

const useTableStyles = makeStyles({
  root: {
    // 开启边框分离模式
    borderCollapse: "separate",
    // 第一个值为左右列间距，第二个值为上下行间距，可按需调整
    borderSpacing: "0 8px",
    // 可选：清除表格左右两侧的默认间距，避免表格和容器之间出现空白
    "& > tbody > tr > td:first-child": {
      paddingLeft: 0,
    },
    "& > tbody > tr > td:last-child": {
      paddingRight: 0,
    },
  },
});

2. 调整原有TableRow样式，删除无效属性：

const useRowStyles = makeStyles({
  root: ({ open }) => ({
    backgroundColor: open ? "#F5F6FF" : "white",
    backgroundOrigin: "border-box",
    "& > *": {
      height: "64px",
    },
  }),
});

3. 组件调用示例：

export default function CustomTable() {
  const tableClasses = useTableStyles();
  // 这里的open参数按你实际的业务逻辑传值即可
  const rowClasses = useRowStyles({ open: false });

  return (
    <Table className={tableClasses.root}>
      <TableBody>
        <TableRow className={rowClasses.root}>
          <TableCell>单元格内容1</TableCell>
          <TableCell>单元格内容2</TableCell>
          <TableCell>单元格内容3</TableCell>
        </TableRow>
        <TableRow className={rowClasses.root}>
          <TableCell>单元格内容1</TableCell>
          <TableCell>单元格内容2</TableCell>
          <TableCell>单元格内容3</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

解决方案2：无需修改Table属性，通过单元格边框模拟 #

如果你不想修改Table的全局样式，可以通过给TableCell添加上下透明边框实现行间距效果：

const useRowStyles = makeStyles({
  root: ({ open }) => ({
    backgroundColor: open ? "#F5F6FF" : "white",
    backgroundOrigin: "border-box",
    "& > *": {
      height: "64px",
      // 上下各加4px透明边框，总共8px行间距，可按需调整
      borderTop: "4px solid transparent",
      borderBottom: "4px solid transparent",
      // 可选：如果需要显示单元格边框，添加这个属性保证边框显示正常
      backgroundClip: "padding-box",
    },
  }),
});

这种方式不需要调整Table的任何属性，直接修改TableRow的样式即可生效，适合小范围修改的场景。

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