Material UI 的 Data Grid 组件不仅提供了强大的数据处理能力，还允许开发者进行丰富的样式定制。本文将详细介绍 Data Grid 的样式配置，包括所有可用属性和方法，并结合实际示例和样式食谱，帮助你创建更具吸引力和功能性的表格。

1. 安装 MUI X Data Grid

首先，确保你已经安装了 Material UI 和 Data Grid 包。如果还没有安装，可以使用以下命令：

npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid

2. 基本 Data Grid 示例

创建一个简单的 Data Grid 实例，以便我们可以在其基础上进行样式定制。

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
  { field: 'email', headerName: 'Email', width: 200 },
];

const rows = [
  { id: 1, name: 'John Doe', age: 35, email: 'john.doe@example.com' },
  { id: 2, name: 'Jane Smith', age: 42, email: 'jane.smith@example.com' },
  { id: 3, name: 'Mike Johnson', age: 28, email: 'mike.johnson@example.com' },
  { id: 4, name: 'Alice Brown', age: 31, email: 'alice.brown@example.com' },
  { id: 5, name: 'Bob White', age: 27, email: 'bob.white@example.com' },
];

const BasicDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
};

export default BasicDataGrid;

3. Data Grid 的样式定制

3.1 使用 sx 属性进行样式设置

Material UI 允许使用 sx 属性对 Data Grid 进行快速样式设置。sx 是一个功能强大的样式系统，可以与 Material UI 组件无缝集成。

const StyledDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        sx={{
          '& .MuiDataGrid-cell': {
            bgcolor: '#f0f0f0',
            border: '1px solid #ccc',
          },
          '& .MuiDataGrid-headerCell': {
            bgcolor: '#1976d2',
            color: '#fff',
            fontWeight: 'bold',
          },
        }}
      />
    </div>
  );
};

export default StyledDataGrid;

3.2 自定义行样式

我们可以根据特定条件自定义行的样式。例如，为年龄超过 30 的用户添加背景色。

const getRowClassName = (params) => {
  return params.row.age > 30 ? 'highlight-row' : '';
};

const CustomRowDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getRowClassName={getRowClassName}
        sx={{
          '& .highlight-row': {
            backgroundColor: 'rgba(255, 0, 0, 0.1)',
          },
        }}
      />
    </div>
  );
};

export default CustomRowDataGrid;

3.3 自定义列样式

可以使用 renderCell 方法为特定列提供自定义样式。例如，可以为 age 列添加不同的文本颜色。

const CustomCell = (params) => {
  return (
    <div style={{ color: params.value > 30 ? 'red' : 'green' }}>
      {params.value}
    </div>
  );
};

const CustomCellDataGrid = () => {
  const customColumns = [
    { field: 'id', headerName: 'ID', width: 90 },
    { field: 'name', headerName: 'Name', width: 150 },
    {
      field: 'age',
      headerName: 'Age',
      width: 110,
      renderCell: CustomCell,
    },
    { field: 'email', headerName: 'Email', width: 200 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={customColumns} />
    </div>
  );
};

export default CustomCellDataGrid;

3.4 自定义工具栏样式

我们可以自定义工具栏的样式，以增强用户体验。

import { GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid';

const CustomToolbar = () => {
  return (
    <GridToolbarContainer sx={{ padding: '8px' }}>
      <GridToolbarExport />
      <button style={{ marginLeft: '8px' }} onClick={() => alert('Custom Action!')}>
        Custom Action
      </button>
    </GridToolbarContainer>
  );
};

const CustomToolbarDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        components={{ Toolbar: CustomToolbar }}
      />
    </div>
  );
};

export default CustomToolbarDataGrid;

4. Styling Recipes

4.1 条件样式

使用条件样式可以根据行或单元格的数据来更改样式。下面的示例展示了如何为行和单元格添加条件样式。

const getRowClassName = (params) => (params.row.age > 30 ? 'highlight-row' : '');
const renderCell = (params) => (
  <div style={{ fontWeight: params.value > 30 ? 'bold' : 'normal' }}>
    {params.value}
  </div>
);

const ConditionalStylingDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={[
          { field: 'id', headerName: 'ID', width: 90 },
          { field: 'name', headerName: 'Name', width: 150 },
          { field: 'age', headerName: 'Age', width: 110, renderCell },
          { field: 'email', headerName: 'Email', width: 200 },
        ]}
        getRowClassName={getRowClassName}
        sx={{
          '& .highlight-row': {
            backgroundColor: 'rgba(255, 165, 0, 0.3)',
          },
        }}
      />
    </div>
  );
};

export default ConditionalStylingDataGrid;

4.2 列头部样式

可以自定义列头部的样式，增强视觉效果。

const StyledHeaderDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        sx={{
          '& .MuiDataGrid-headerCell': {
            backgroundColor: '#3f51b5',
            color: '#fff',
            fontSize: '16px',
          },
        }}
      />
    </div>
  );
};

export default StyledHeaderDataGrid;

4.3 响应式设计

通过使用 @media 查询，我们可以为不同屏幕尺寸调整 Data Grid 的样式。

const ResponsiveDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        sx={{
          '& .MuiDataGrid-cell': {
            padding: '8px',
          },
          '@media (max-width: 600px)': {
            '& .MuiDataGrid-cell': {
              fontSize: '12px',
            },
          },
        }}
      />
    </div>
  );
};

export default ResponsiveDataGrid;

5. 总结

通过以上示例，我们深入探讨了 Material UI Data Grid 的样式定制，包括使用 sx 属性、条件样式、自定义单元格和行样式等。通过这些技术，我们可以创建具有吸引力和功能性的 Data Grid，满足不同的应用需求。

希望本篇博客能帮助你更好地理解和使用 Material UI 的 Data Grid 样式功能。如有任何问题或建议，欢迎在评论区留言！