如何更改 antd 表格标题颜色

Question

我尝试将基类作为目标，但不起作用。

.ant-table .ant-table-container .ant-table-content table thead.ant-table-thead {
  background-color: green !important;
}

有没有一种可行的方法来实现这一目标？

对应JSX：

<Table columns={columns} dataSource={dataSource} />

Antd 表格文档：https://ant.design/components/table/

Answer 1

表格标题的背景颜色来自表格单元格。尝试使用以下规则。

.ant-table-thead .ant-table-cell {
  background-color: green;
}

Answer 2

使用“！重要”

  .ant-table-thead .ant-table-cell {
  background-color: green !important;
  }

Answer 3

这没有

!important

antd 默认样式是高度特定的。您需要更具体地定位元素以覆盖默认样式。

!important

不需要以下特性。

.ant-table
  .ant-table-container
  .ant-table-content
  table
  thead.ant-table-thead
  .ant-table-cell {
  background-color: green;
}