table 设置奇偶行颜色不一样

 项目需求，采用ant design table展示数据，需要点击行变色，表格行之间有颜色区分

import React from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Table } from 'antd';
import { columns, list } from './dataList'; //数组文件
import styles from './style.less';
import {
  ContainerDiv,
  WrapperDiv,
  SearchDiv,
  TableWrapDiv,
  TableTopDiv,
  TableTitleDiv,
  BreadcrumbDiv,
  ButtonDiv,
} from '@/assets/style/bdreport'; //封装的标签组件 利用styled-components
import { Breadcrumb } from 'antd';
export default (props: any) => {
  // 设置奇偶行颜色
  const setRowClassName = (record, index) => {
    let rowColor = index % 2 === 0 ? '' : styles.even; //判断单双行，赋予不同样式
    return rowColor
  };
  return (
    <ContainerDiv>
      <BreadcrumbDiv separator=">">
        <Breadcrumb.Item>所有项目</Breadcrumb.Item>
      </BreadcrumbDiv>
      <WrapperDiv>
        <SearchDiv> 1</SearchDiv>
        <TableWrapDiv>
          <TableTopDiv>
            <TableTitleDiv>
              <span style={{ verticalAlign: 'middle', paddingRight: 12 }}>
                项目列表
              </span>
            </TableTitleDiv>
            <ButtonDiv>
              <Button icon={<PlusOutlined />}>新建</Button>
            </ButtonDiv>
          </TableTopDiv>
          <div>
            
            <Table
              rowKey={(record) => `${record.id}${Math.random()}`}
              columns={columns}
              dataSource={list}
              rowClassName={setRowClassName} //设置行颜色
            ></Table>
          </div>
        </TableWrapDiv>
      </WrapperDiv>
    </ContainerDiv>
  );
};

//新建style.less
.even {
  background: rgba(240, 242, 244, 0.9);
  border-radius: 6px;
}