I have created a IgrDataGrid and now I want to add alternate color for alternate rows. For example black color for all even rows and grey color for all odd rows. If someone can help me with the approach for this issue.

I have created this UI grid using IgrDataGrid:-

This is the sample output which I'm expecting and trying to achieve:-

My code for IgrDataGrid:-

import React from 'react';
import { IgrDataGrid, IgrDataGridModule, IgrGridColumnOptionsModule } from 'igniteui-react-grids';
import { IgrTextColumn } from 'igniteui-react-grids';
import "../css/InfragisticsGrid.css";

IgrDataGridModule.register();
IgrGridColumnOptionsModule.register();

export default class DataGridBindingLocalData extends React.Component<any, any> {

    public data!: any[];
    public grid!: IgrDataGrid;

    constructor(props: any) {
        super(props);
        this.state = { componentVisible: true }
        this.initData();
    }

    public onGridRef = (grid: IgrDataGrid) => {
        if (!grid) { return; }
        this.grid = grid;
    }

    public render(): JSX.Element {
        return (
            <div className="infragisticsGrid">
                <IgrDataGrid
                    ref={this.onGridRef}
                    width="27.7%"
                    height="calc(100% - 2.75rem)"
                    dataSource={this.data}
                    autoGenerateColumns="false"
                    cornerRadiusBottomLeft={10}
                    cornerRadiusBottomRight={10}
                    cornerRadiusTopLeft={10}
                    cornerRadiusTopRight={10}
                    columnMovingMode="Deferred"
                    columnMovingAnimationMode="None"
                    selectionMode="SingleRow"
                    cellBackground="#222536"
                    cellTextColor="#D2D4D5"
                    border="#67605999"
                    cellSelectedBackground="#3e405c"
                    headerTextColor="#D2D4D5"
                    headerBackground="#222536"
                    rowHoverBackground="#3e405c"
                    rowSeparatorBackground="#545861"
                    editMode={"None"}
                    headerRowSeparatorBackground="#545861"
                    headerSeparatorBackground="#222536"
                    summaryRootBackground="#343a40"
                    summaryRootValueTextColor="#D2D4D5"
                    rowHeight={25}
                    headerHeight={25}
                    headerSortIndicatorColor="#D2D4D5"
                    isRowHoverEnabled={true}
                    columnOptionsIconColor="#D2D4D5"
                    columnOptionsIconAlignment={3}
                >
                    <IgrTextColumn field="Symbol" headerText="Symbol" width="113"/>
                    <IgrTextColumn field="Bid" headerText="Bid" width="83"/>
                    <IgrTextColumn field="Ask" headerText="Ask" width="86" />
                    <IgrTextColumn field="Price" headerText="Price" width="94" />
                </IgrDataGrid>
            </div>
        );
    }

    public getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    public getRandomItem(array: any[]): any {
        const index = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    public initData() {
        const symbols: string[] = ["AMZN", "APPL", "FB", "TSLA", "GOOG",];
        const bid: number[] = [92.34, 94.56, 108.12, 80.47, 75.89]
        const ask: number[] = [92.34, 94.56, 108.12, 80.47, 75.89]
        const prices: number[] = [11.11, 19.01, 11.05, 12.12, 13.11]
        const wishlistData: any[] = [];

        for (let i = 0; i < 10; i++) {
            wishlistData.push({
                Symbol: this.getRandomItem(symbols),
                Bid: this.getRandomItem(bid),
                Ask: this.getRandomItem(ask),
                Price: this.getRandomItem(prices),
            });
        }
        this.data = wishlistData;
    }
}