React中如何为MUI DataGrid表格设置隔行变色效果？

实现步骤 #

1. 为DataGrid添加行类名判断

修改DataGrid组件，通过rowClassName回调函数根据行ID判断奇偶行，分配不同的CSS类：

<DataGrid 
  rows={rows} 
  columns={columns}
  rowClassName={(params) => params.id % 2 === 0 ? 'even-row' : 'odd-row'}
/>

2. 添加CSS样式

在App.css中补充以下样式，确保覆盖DataGrid默认行样式：

.box .MuiDataGrid-row.odd-row {
  background-color: #36384f;
}

.box .MuiDataGrid-row.even-row {
  background-color: #40425a;
}

/* 可选：移除默认行hover样式，保持统一风格 */
.box .MuiDataGrid-row:hover {
  background-color: inherit;
}

修改后的完整代码 #

组件代码

import Box from '@mui/material/Box';
import { GridColumns, DataGrid } from '@mui/x-data-grid';
import "../../css/App.css";

const columns: GridColumns = [
    {
      field: 'Symbol',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
    {
      field: 'Side',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
    {
      field: 'Broker',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
    {
      field: 'OrderStatus',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
    {
      field: 'OrderQty',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
    {
      field: 'Cumulative',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
    {
      field: 'OrderType',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
    {
      field: 'Account',
      headerClassName: 'super-app-theme--header',
      headerAlign: 'center',
      width: 140,
      cellClassName: 'super-app-theme--cell',
    },
  ];
  
const rows=[
    {id: 1, Symbol:'INR', Side:'Buy', Broker:'Steve', OrderStatus:'New', OrderQty:2, Cumulative:'-', OrderType:'Buy', Account:'Account 1'},
    {id: 2, Symbol:'INR', Side:'Sell', Broker:'John', OrderStatus:'New', OrderQty:3, Cumulative:'-', OrderType:'Sell', Account:'Account 2'},
    {id: 3, Symbol:'INR', Side:'Buy', Broker:'Alex', OrderStatus:'New', OrderQty:4, Cumulative:'-', OrderType:'Buy', Account:'Account 3'},
    {id: 4, Symbol:'INR', Side:'Sell', Broker:'Smith', OrderStatus:'New', OrderQty:5, Cumulative:'-', OrderType:'Sell', Account:'Account 1'},
    {id: 5, Symbol:'INR', Side:'Buy', Broker:'Harry', OrderStatus:'New', OrderQty:6, Cumulative:'-', OrderType:'Buy', Account:'Account 2'},
    {id: 6, Symbol:'INR', Side:'Sell', Broker:'Johnson', OrderStatus:'New', OrderQty:7, Cumulative:'-', OrderType:'Sell', Account:'Account 3'},
    {id: 7, Symbol:'INR', Side:'Buy', Broker:'Peter', OrderStatus:'New', OrderQty:8, Cumulative:'-', OrderType:'Buy', Account:'Account 1'},
    {id: 8, Symbol:'INR', Side:'Sell', Broker:'David', OrderStatus:'New', OrderQty:4, Cumulative:'-', OrderType:'Sell', Account:'Account 2'}
];
  
export default function Table() {
  return (
    <Box className="box"
      sx={{
        height: 550,
        width: 1122,
      }}
    >
      <DataGrid 
        rows={rows} 
        columns={columns}
        rowClassName={(params) => params.id % 2 === 0 ? 'even-row' : 'odd-row'}
      />
    </Box>
  );
}

CSS样式（App.css）

.box{
  margin-left: 100px; 
  background-color: #36384f;   
  color: white;
  margin-top: 10px;  
}

.box .MuiDataGrid-row.odd-row {
  background-color: #36384f;
}

.box .MuiDataGrid-row.even-row {
  background-color: #40425a;
}

.box .MuiDataGrid-row:hover {
  background-color: inherit;
}

说明 #

• 若行ID不是连续自增格式，可改用params.index判断（index从0开始，index % 2 === 0对应第一行）
• 嵌套选择器.box .MuiDataGrid-row用于提高样式优先级，确保覆盖DataGrid默认行背景
• 移除hover样式为可选操作，可根据需求保留或调整

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