如何在反应中为行提供替代颜色？

Question

我在react js中创建了一个表。我想为替代行提供替代颜色。我想为所有偶数行提供一种颜色，为所有奇数行提供另一种颜色。怎么办？

我没有找到适当的方法，我已经尝试在最后这样做，但无法这样做。因此，我添加了我的 React js 代码及其 css。

这是我的桌子代码：-

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

这是我使用的CSS：-

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

此图像是我期待的示例输出。

Answer 1

更新答案：

也许

<StripedDataGrid />

而不是

<DataGrid />

会产生魔力。

查看 MUI 文档：条纹行

旧答案：

这些行有类名吗？那么你应该能够使用 CSS 做到这一点。

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

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

：第 n 个类型选择器

Answer 2

 <TableBody>
    {table.getRowModel().rows?.length ? (
      table.getRowModel().rows.map((row, **index**) => (
        <TableRow
          key={row.id}
          data-state={row.getIsSelected() && 'selected'}
          **className={`${index % 2 === 0 ? 'bg-muted' : 'bg-transparent'}`}**
        >
          {row.getVisibleCells().map((cell) => (
            <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
          ))}
        </TableRow>
      ))
    ) : (
      <TableRow>
        <TableCell colSpan={columns.length} className='h-24 text-center'>
          No results.
        </TableCell>
      </TableRow>
    )}
  </TableBody>