How to change antd Table header color

Question

I tried to target base classes as below which doesn't work.

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

Is there a working way to achieve this?

Corresponding JSX:

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

Antd Table Docs: https://ant.design/components/table/

Answer 1

Background Color for Table Header is come from Table Cell. Try using below rule.

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

Answer 2

This works without !important

Antd default styles are highly specific. You need to target the element with more specificity to override default styles.

!important is not required with the below specificity.

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

Answer 3

use "!important"

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