如何调整material-react-table表格单元格的内边距？

下面是几种可行的解决方式，按需选择：

1. 全局CSS覆盖（快速生效） #

直接针对单元格的固定类名编写样式，优先级高于MUI默认样式：

.MuiTableCell-root.MuiTableCell-body.MuiTableCell-sizeMedium {
  padding: 8px 16px; /* 替换成你需要的内边距值 */
}

注意：避免单独使用动态生成的css-ny9njj-MuiTableCell-root类名，这类名称会随构建环境或MUI版本变化，稳定性差。

2. MUI主题全局配置（统一所有表格样式） #

通过自定义MUI主题来批量修改所有TableCell的内边距，适合项目内所有表格样式统一的场景：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import MaterialReactTable from 'material-react-table';

const customTheme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        body: {
          padding: '8px 16px',
        },
        sizeMedium: {
          padding: '8px 16px', // 针对medium尺寸的单元格单独配置
        },
      },
    },
  },
});

// 在组件中使用主题包裹表格
function MyTable() {
  return (
    <ThemeProvider theme={customTheme}>
      <MaterialReactTable columns={columns} data={data} />
    </ThemeProvider>
  );
}

3. 单个列/单元格自定义（局部修改） #

如果只想修改特定列的单元格内边距，可以在列配置中直接设置内联样式或自定义类：

内联样式方式 #

const columns = [
  {
    accessorKey: 'name',
    header: '名称',
    cell: ({ cell }) => (
      <div style={{ padding: '6px 12px' }}>{cell.getValue()}</div>
    ),
  },
  // 其他列配置...
];

自定义类名方式 #

const columns = [
  {
    accessorKey: 'email',
    header: '邮箱',
    cellClassName: 'custom-cell-padding',
  },
];

对应的CSS：

.custom-cell-padding {
  padding: 6px 12px;
}

4. Styled组件自定义TableCell #

使用MUI的Styled API创建自定义样式的TableCell，适合需要复用样式的场景：

import styled from '@mui/material/styles/styled';
import TableCell from '@mui/material/TableCell';
import MaterialReactTable from 'material-react-table';

const StyledTableCell = styled(TableCell)({
  padding: '8px 16px',
});

const columns = [
  {
    accessorKey: 'phone',
    header: '电话',
    cell: ({ cell }) => (
      <StyledTableCell component="div">{cell.getValue()}</StyledTableCell>
    ),
  },
];

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