如何修改Material React Table不同密度模式的样式？

方法1：通过MUI主题全局定制 #

material-react-table基于Material UI构建，可通过自定义MUI主题统一修改不同密度模式下的表格样式，比如行高、单元格内边距、字体大小等：

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

// 自定义主题
const customTableTheme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          // 紧凑模式样式
          ...(ownerState.density === 'compact' && {
            padding: '4px 16px',
            fontSize: '0.875rem',
          }),
          // 舒适模式样式
          ...(ownerState.density === 'comfortable' && {
            padding: '12px 16px',
            fontSize: '1rem',
          }),
        }),
      },
    },
    MuiTableRow: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.density === 'compact' && {
            height: '32px',
          }),
          ...(ownerState.density === 'comfortable' && {
            height: '48px',
          }),
        }),
      },
    },
  },
});

// 用主题包裹表格组件
export default function CustomDensityTable() {
  return (
    <ThemeProvider theme={customTableTheme}>
      <MaterialReactTable
        columns={yourColumns}
        data={yourData}
        density="compact" // 切换为"comfortable"查看效果
      />
    </ThemeProvider>
  );
}

方法2：直接覆盖CSS类 #

material-react-table会为不同密度的表格添加专属类名：mrt-table-density-compact和mrt-table-density-comfortable，可通过全局CSS或CSS模块直接覆盖样式：

/* 紧凑模式下的单元格样式 */
.mrt-table-density-compact .MuiTableCell-root {
  padding: 3px 12px;
  font-size: 0.8rem;
}

/* 舒适模式下的行高 */
.mrt-table-density-comfortable .MuiTableRow-root {
  height: 52px;
}

方法3：通过组件props动态设置 #

如果只需要针对单个表格定制，可直接通过muiTableCellProps、muiTableRowProps等props，结合当前密度值动态设置样式：

import { useState } from 'react';
import MaterialReactTable from 'material-react-table';

export default function DynamicDensityTable() {
  const [density, setDensity] = useState('compact');

  return (
    <>
      <button onClick={() => setDensity(density === 'compact' ? 'comfortable' : 'compact')}>
        切换密度
      </button>
      <MaterialReactTable
        columns={yourColumns}
        data={yourData}
        density={density}
        muiTableCellProps={{
          sx: {
            padding: density === 'compact' ? '4px 14px' : '10px 14px',
            fontSize: density === 'compact' ? '0.85rem' : '1rem',
          },
        }}
        muiTableRowProps={{
          sx: {
            height: density === 'compact' ? '30px' : '46px',
          },
        }}
      />
    </>
  );
}

注意事项 #

• 样式优先级：sx props > 主题定制 > 全局CSS，可根据需求选择合适方式
• 若需修改表头样式，可针对MuiTableHead、MuiTableCell-head类进行定制

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