How to give alternate color to rows in react?

Question

I have created a table in react js. I want to give alternate colors for alternate rows. I want to give all even rows with one color and all odd rows with another color. How it can be done?

I am not getting the appropriate approach for this and I have tried doing it at my end but unable to do so. So for the same I am adding my react js code along with its css.

This is my table code:-

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}/>
      </Box>
      
    );
  }

And this is the CSS which I have used:-

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

This image is the sample output which I am expecting.

Answer 1

Updated answer:

Maybe <StripedDataGrid /> instead of <DataGrid /> does the magic.

Check out the MUI docs: Striped rows

Old answer:

Do the rows have a className? Then you should be able do that with CSS.

    .super-app-theme--row:nth-of-type(odd) {
      background-color: red;
    }

    .super-app-theme--row:nth-of-type(even) {
      background-color: green;
    }

:nth-of-type Selector