antd table react 隔行换色 根据某单元格的内容改变颜色

1.隔行换色

<Table
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{ y: 200 }}
              rowClassName={
                (record, index) => {
                  let className = ''
                  className = index % 2 ===0 ? 'ou' : 'ji'
                  // console.log(className)
                  return className
                }
              }
 ></Table>

.ou {
    background: transparent;
  }
  .ji {
    //background: rgba(222, 245, 255, 0.65);
    background: rgba(28, 85, 109, 0.65);
  }

2.根据某单元格内容改变 字体颜色

const columns = [
    {
      title: '区域',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      render: (text: string) => {
        if(text === '待巡查') {
          return <span style={{color: 'rgb(121, 232, 161'}}>{text}</span>
        } else {
          return <span style={{color: 'white'}}>{text}</span>
        }
      }
    },
    {
      title: '巡查人',
      dataIndex: 'people',
      key: 'people',
    },
  ];

效果图 ：

这篇好文章是转载于：学新通技术网