如何根据 ID 使用 2 种交替颜色更改 React TypeScript 数据表中行的背景颜色？

Question

我需要在 React Typescript 中使用 2 种交替颜色更改我的数据表中行的背景颜色，当标识号与前一个不同时。请注意，标识号不是连续的数字，如 1、2、3 等

我想用的颜色是： #7BB4BD #B0D2D7

还请注意，一个标识号可以有多个具有相同标识号的行/记录，因为它是一个填充数据表的人员数据库，因此您不能像往常一样只是交替行。因此，对于每个不同的标识号，该行需要不同的背景颜色，但对于具有相同标识号的多行，它们需要具有相同的背景颜色。

这是我当前的代码：

import { ActionsCell } from '../../Component/Common/Components/DataTable/ActionsCell';
import { DefaultCell } from '../../Component/Common/Components/DataTable/DefaultCell';
import { PeopleDtos } from '../../Component/Model/Dto/People';
import { DateFormatter } from '../../Component/Model/helpers';
import { TableColumn } from '../../Component/Model/Table/Table';

interface PeopleTableRow {
    ID: number;
    IdentificationNumber: string;
    EmployeeCode: string;
    ScorecardName: string;
    ScorecardType: string;
    FullName: string;
    Race: string;
    Gender: string;
    Disabled: string;
    CreatedDate: string;
    CreatedBy: string;
    Actions?: any;
}

export interface IPeopleTable {
    columns: Array<TableColumn>;
    rows: Array<PeopleTableRow>;
}

export function PeopleTableMapper(results: PeopleDtos.PeopleSearchRow[], onEditPeopleRow: (id: number) => void, onDeletePeopleRow: (id: number) => void): IPeopleTable | undefined {

    const columns = [
        { Header: 'ID Number', accessor: 'IdentificationNumber', Cell: ({ value }: any) => <DefaultCell value={value} />, disableSortBy: true },
        { Header: 'Employee Code', accessor: 'EmployeeCode', Cell: ({ value }: any) => <DefaultCell value={value} />, disableSortBy: true },
        { Header: 'Scorecard Name', accessor: 'ScorecardName', id: 'ScorecardName', Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Scorecard Type', accessor: 'ScorecardType', id: 'ScorecardType', Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Full Name', accessor: 'FullName', id: "FirstName", Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Race', accessor: 'Race', id: "RaceId", Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Gender', accessor: 'Gender', id: "GenderId", Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Disabled', accessor: 'Disabled', id: "IsDisabled", Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Created Date', accessor: 'CreatedDate', id: "CreatedDateUtc", Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Created By', accessor: 'CreatedBy', Cell: ({ value }: any) => <DefaultCell value={value} /> },
        { Header: 'Actions', accessor: 'Actions', Cell: ({ value }: any) => <ActionsCell actions={value} />, disableSortBy: true },
    ];

    if (results.length >= 0) {

        const rows = results.map((item: PeopleDtos.PeopleSearchRow, index: number) => ({
            ID: item.id,
            IdentificationNumber: item.identificationNumber,
            EmployeeCode: item.employeeCode,
            ScorecardName: item.scorecardName,
            ScorecardType: item.scorecardType,
            FullName: item.fullName,
            Race: item.race,
            Gender: item.gender,
            Disabled: item.isDisabled ? 'Yes' : 'No',
            CreatedDate: DateFormatter(item.createdDate.toString()),
            CreatedBy: item.createdBy,
            Actions: [
                {
                key: index.toString(),
                label: 'Edit',
                action: () => {
                    onEditPeopleRow(item.id);
                },
                icon: {
                    color: 'info',
                    name: 'edit',
                },
                },
                {
                key: index.toString(),
                label: 'Delete',
                action: () => {
                    onDeletePeopleRow(item.id);
                },
                icon: {
                    color: 'error',
                    name: 'delete',
                },
                },
            ],
        }));

        return { columns: columns, rows: rows };
    }else{
        return { columns: columns, rows: [] };
    }
}

我试过询问 ChatGPT，但没有给我正确的答案。我还查看了其他 stackoverflow 帖子和 React 文档，但我似乎无法弄清楚。