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

Question

I used a material ui data grid for showing some data.

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

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

Now I want to change the rows color based on their "name" property. I mean I want to set a different color for each row that has a different name. How should I do this?

Answer 1

MUI has an example for styling the rows that can be found here: https://mui.com/x/react-data-grid/style/#styling-rows

You'll want to use the getRowClassName prop and provide it with a function with whatever logic you want to produce the classes you wish to style.