数据表格 - 样式

表格 CSS 可以轻松覆盖。

使用 `sx` 属性

对于一次性样式，可以使用 sx 属性。它允许将简单到复杂的自定义直接应用于数据表格元素。接受的键可以是任何 CSS 属性以及 MUI 提供的自定义属性。有关更多详细信息，请访问 sx 属性页面。

<DataGrid sx={{ m: 2 }} /> // Sets the margin to 2 times the spacing unit = 16px

<DataGrid
  {...data}
  sx={{
    boxShadow: 2,
    border: 2,
    borderColor: 'primary.light',
    '& .MuiDataGrid-cell:hover': {
      color: 'primary.main',
    },
  }}
/>

<DataGrid
  {...data}
  sx={{
    boxShadow: 2,
    border: 2,
    borderColor: 'primary.light',
    '& .MuiDataGrid-cell:hover': {
      color: 'primary.main',
    },
  }}
/>

按 Enter 键开始编辑

样式化列标题

GridColDef 类型具有在标题上应用类名和自定义 CSS 的属性。

headerClassName：用于将类名应用于列标题。它也可以是一个函数，该函数使用 GridColumnHeaderParams 对象调用。
headerAlign：用于对齐标题的内容。它必须是 'left' | 'right' | 'center' 之一。

const columns: GridColDef[] = [
  {
    field: 'first',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
  {
    field: 'last',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
];

<DataGrid rows={rows} columns={columns} />

<DataGrid rows={rows} columns={columns} />

按 Enter 键开始编辑

样式化行

可以使用 getRowClassName 属性在每行上应用自定义 CSS 类。它使用 GridRowParams 对象调用，并且必须返回一个字符串。有时可能需要使用更高优先级的 CSS 选择器来覆盖现有规则。

interface GridRowParams<R extends GridRowModel = GridRowModel> {
  /**
   * The grid row id.
   */
  id: GridRowId;
  /**
   * The row model of the row that the current cell belongs to.
   */
  row: R;
  /**
   * All grid columns.
   */
  columns: GridColDef[];
}

<StyledDataGrid
  {...data}
  loading={loading}
  getRowClassName={(params) => `super-app-theme--${params.row.status}`}
/>

<StyledDataGrid
  {...data}
  loading={loading}
  getRowClassName={(params) => `super-app-theme--${params.row.status}`}
/>

按 Enter 键开始编辑

样式化单元格

有多种方法可以在单元格上应用自定义 CSS 类。

使用 GridColDef 的 cellClassName 属性

此属性允许设置一个 CSS 类，该类应用于定义它的列的每个单元格。它也可以是一个函数，该函数使用 GridCellParams 对象调用。

const columns: GridColDef[] = [
  {
    field: 'name',
    cellClassName: 'super-app-theme--cell',
  },
  {
    field: 'score',
    type: 'number',
    cellClassName: (params: GridCellParams<number>) =>
      clsx('super-app', {
        negative: params.value < 0,
        positive: params.value > 0,
      }),
  },
];

使用 getCellClassName 属性

此属性为每列中的每个单元格调用。与第一个选项不同，此属性在数据表格级别定义，而不是在列级别定义。它也使用 GridCellParams 对象调用。

<DataGrid
  rows={rows}
  columns={columns}
  getCellClassName={(params: GridCellParams<any, any, number>) => {
    if (params.field === 'city' || params.value == null) {
      return '';
    }
    return params.value >= 15 ? 'hot' : 'cold';
  }}
/>

<DataGrid
  rows={rows}
  columns={columns}
  getCellClassName={(params: GridCellParams<any, any, number>) => {
    if (params.field === 'city' || params.value == null) {
      return '';
    }
    return params.value >= 15 ? 'hot' : 'cold';
  }}
/>

按 Enter 键开始编辑

单元格对齐

使用 GridColDef 中的 align 属性来更改单元格内容的对齐方式。从以下值中选择一个：'left' | 'right' | 'center'。

条纹行

您可以使用传递给 getRowClassName 的 indexRelativeToCurrentPage 参数，将交替样式应用于行。

以下演示说明了如何实现这一点。

<StripedDataGrid
  loading={loading}
  {...data}
  getRowClassName={(params) =>
    params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
  }
/>

<StripedDataGrid
  loading={loading}
  {...data}
  getRowClassName={(params) =>
    params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
  }
/>

按 Enter 键开始编辑

主题标题和固定部分

默认情况下，数据表格对其标题和固定部分的背景使用 Material UI 的 theme.palette.background.default 颜色。这些元素需要纯色来隐藏它们后面的可滚动内容。您可以使用以下配置覆盖该颜色

import { createTheme } from '@mui/material/styles';
import type {} from '@mui/x-data-grid/themeAugmentation';

const theme = createTheme({
  mixins: {
    MuiDataGrid: {
      // Pinned columns sections
      pinnedBackground: '#340606',
      // Headers, and top & bottom fixed rows
      containerBackground: '#343434',
    },
  },
});

自定义主题

以下演示利用 CSS 自定义 API 来匹配 Ant Design 规范。