Antd 表格样式修改

修改表头、列表文字和背景颜色

  //修改表头文字、背景颜色  
      .ant-table-thead > tr >th{
        color: white;
        background: #3071b9 !important;
      }

      //修改列表文字、背景颜色  
      .ant-table-tbody > tr >th{
        color: white;
        background: #3071b9 !important;
        }

 去掉（修改）鼠标移到某行时的背景

onRow={(record, index) => {
    return {
        onClick: (e) => {
            let tr = e.target.parentNode; //拿到tr标签
            if (tr.nodeName !== 'TR') {
                tr = tr.parentNode
            }
            //给所有tr标签设置颜色
            for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                tr.parentNode.childNodes[i].style.color = 'white'
            }
            //单独设置被选中的标签颜色
            tr.style.color = "rgb(115,201,236)";
        },
    };

   这个判断是因为在你设置表格中的元素不是文本而是你添加的标签的时候，你使用e.target.parentNode拿到的是你添加的标签，所以这里做了这样的判断。当然你表格中单纯是文本不需要添加这段代码。

if (tr.nodeName !== 'TR') {  
                tr = tr.parentNode  
      }

设置奇偶行不同背景

rowClassName 也是table提供的属性，这里通过检查当前行是奇数还是偶数分别使用不同的类型，在对不同类名使用不同的背景色。

 rowClassName = {(record, index) => {
    let className = index % 2 ? 'shallow\_gray':'deep\_gray';
    return className
    }}