如何更改 material ui 数据网格中的行背景颜色？

Question

我使用 material ui 数据网格来显示一些数据。

import { DataGrid } from "@material-ui/data-grid"const 

columns = [
{
  id: "...",
  name: "...",      
},
...]
const rows = .....
<DataGrid rows={rows} columns={columns} autoHeight={true} />

现在我想根据行的“名称”更改行颜色属性。我的意思是我想为具有不同名称的每一行设置不同的颜色。我应该怎么做？

Answer 1

MUI 有一个可以在此处找到的行样式示例：https://mui.com/x/react-data-grid/style/#styling-rows

您需要使用 getRowClassName 道具并为其提供一个函数，该函数具有您想要生成您想要设置样式的类的任何逻辑。

如何更改 material ui 数据网格中的行背景颜色？

how to change the row background color in material ui datagrid?

reactjs

datagrid