React中MUI v5.8.4 Table组件如何设置border-spacing样式

MUI Table 组件默认设置了 border-collapse: collapse，直接写入border-spacing不会生效，只要先覆盖这个默认属性，就能实现和原生CSS一致的效果，下面是3种常用实现方式：

• 方式1：单组件内联sx属性（最快捷，适合单个表格使用场景）
  直接在Table组件的sx属性中写入对应样式即可，逻辑和你写的原生CSS完全一致：

import Table from '@mui/material/Table';

// 组件内使用
<Table
  sx={{
    borderCollapse: 'separate',
    borderSpacing: '0 15px',
  }}
>
  {/* 后续放TableHead、TableBody、TableRow、TableCell等内容即可 */}
</Table>

常见踩坑：如果加完样式后出现单元格边框错位、行分隔线断裂的问题，可以给对应TableCell补充背景色、圆角样式，不要依赖默认的合并边框效果即可。如果要做卡片式行效果，直接给TableCell设置背景色，首列加左圆角、末列加右圆角就能实现常见的间距行卡片效果。

• 方式2：全局主题覆写（适合项目所有表格统一用该样式的场景）
  在MUI自定义主题的配置中，直接覆写MuiTable的根节点默认样式，全局所有Table组件都会自动生效：

import { createTheme } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiTable: {
      styleOverrides: {
        root: {
          borderCollapse: 'separate',
          borderSpacing: '0 15px',
        },
      },
    },
  },
});

之后正常在ThemeProvider包裹的项目中使用Table组件，不需要单独加样式。

• 方式3：styled封装自定义组件（适合多页面复用该样式表格的场景）
  用MUI提供的styled工具封装一个自带间距样式的Table组件，需要用的地方直接引入即可：

import { styled } from '@mui/material/styles';
import Table from '@mui/material/Table';

const SpacedRowTable = styled(Table)({
  borderCollapse: 'separate',
  borderSpacing: '0 15px',
});

// 使用时直接替换原Table标签
<SpacedRowTable>
  {/* 表格内容 */}
</SpacedRowTable>

注意：不要尝试给TableRow设置margin值实现行间距，table布局下tr元素的margin属性不会生效，必须通过table根节点的border-spacing属性实现行间距效果。

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