reactjs 如何更改antd表格标题颜色

sxpgvts3 于 2023-03-22 发布在 React

关注(0)|答案(3)|浏览(443)

我试着像下面这样定位基类，但这不起作用。

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

有没有一种方法可以做到这一点？

对应的JSX：

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

3条答案

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

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

使用“！important”

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

Antd的默认样式是高度特定的。你需要以更特定的元素为目标来覆盖默认样式。
!important不需要具有以下特异性。

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