react antd 更改table 表头和表行样式

我这里以组件的形式来提供code

使实例正确运行至少需要以下知识：

1 创建react项目（本实例基于react项目）

2 知道如何导入和调用组件

样式效果如下图：

        

 

实现方法

目录结构：

 

YMCollapse.css 样式文件code如下：

/* 行样式1 */

.oddRow {

    background: LightCyan;

  }

/* 行样式2 */

.evenRow {

    background: PowderBlue;

  }

/* 表头样式

!important 将权重加到最大，否则可能不生效。

但是缺点是项目中的所有的表头都将变成改样式 */

.ant-table-thead > tr >th{

    background: #FFE4B5  !important; 

}

YMCollapse.jsx code如下：

import React, { Component } from 'react'

import { Table } from 'antd';

import {  Col, Row  } from 'antd'

import './YMCollapse.css' //导入我们自己的样式文件

// 为了节约文件行收缩了columns 和 data的格式

const columns = [ { title: <strong>DCN</strong>,dataIndex: 'dcn', key: 'dcn', },

    { title: <strong>Dev</strong>, dataIndex: 'dev',key: 'dev', },

    { title: <strong>Title</strong>, dataIndex: 'title',key: 'title', }, ]

const data = [ { key: "1",dcn: 'dcn1',dev: 'a', title:"test dcn1", },

    { key: "2",dcn: 'dcn2',dev: 'b', title:"test dcn2", },

    { key: "3",dcn: 'dcn3',dev: 'c', title:"test dcn3", },

    { key: "4",dcn: 'dcn4',dev: 'd', title:"test dcn4", }, ]

export default class QTICollapse extends Component {

    // 通过 getRowClassName函数修改样式

    getRowClassName = (record, index) => {

        let className = ''

        // oddRow 和 evenRow为我们css文件中的样式名称

        className = index % 2 === 0 ? "oddRow" : "evenRow"

        return className

      }

    render() {

        return (

        <Row>

            <Col span={4}></Col>

            <Col span={8}>

                <Table

                    columns={columns} 

                    dataSource={data} 

                    pagination={false}

                    rowClassName={this.getRowClassName} //rowClassName 行样式修改属性

                    />

            </Col>

            <Col span={4}></Col>

        </Row>

            

        )

    }

}

组件调用：

import YMCollapse from '....../YMCollapse/YMCollapse' //导入组件

<YMCollapse/> //调用组件