reactjs - ant设计表组件的Header怎么配置？

Question

我们需要在表格标题上显示“隐藏/显示”列功能，并且我们希望在 ant 设计中为表格标题提供不同的颜色。谁能帮助我我们该怎么做？我没有找到任何控件来执行此操作，因为标题渲染完全在组件内部。

Answer 1

我试图解决标题的背景颜色问题是覆盖蚂蚁样式类，如下所示

thead[class*="ant-table-thead"] th{
  background-color: yellow !important;
}

我不确定这是否是正确的做法。antd 应该提供 Table 上的属性来配置表头样式。

还有其他更好的方法吗？

Answer 2

您可以将<Table.Column title={<...any react node...>}>属性与普通 CSS 结合使用。

Answer 3

kalbana 提供的解决方案对我不起作用。起作用的（Ant V4.10.x）是这样的：

thead > tr > th {
  background-color: yellow;
}

请注意，此!important设置不是必需的。

同样，如果要定位表格的单元格，可以使用：

tbody > tr > td {
  background-color: yellow;
}