Ant中修改Table的标题title实现不同自定义背景颜色

需求背景 需要在Table表格的标题title中实现不同颜色的标题 

实现思路：通过在 columns中 修改title的颜色

let columnsYX = [{
    title: '类型',
    dataIndex: 'category',
    width: 80,
  }, {
    title: <div style={{backgroundColor:'red'}}>'唯一识别码'</div>,
    dataIndex: 'visitNo',
    width: 120,
  }, {
    title: '病案号1',
    dataIndex: 'chartNo',
    width: 120,
  },]

效果：

这时候出现问题  在title的设置后  外层还是原组件颜色

这时候我们在控制台，盒子模型中发现有一个padding:16的内边距

这时候解决办法：通过 :global 使用css将元素定位并改变样式

.zrjCSS3 {
  :global {
    .ant-table-bordered .ant-table-thead>tr>th {
      background-color: #4874CB;
      color: #fff;
      padding: 0px;
      text-align: center;
      line-height: 50px;
    }
    .ant-table-thead > tr > th .ant-table-header-column{
      display: block;
    }

  }
}

<div className={zjrCSS3}>
  <Table columns={columns} dataSource={dataSource} bordered
    loading={loadingVis}
  />
</div>

最终效果：