如何更改 ant.design 'Table' 组件的样式？答案

【问题标题】：How to change the style of an ant.design 'Table' component?如何更改 ant.design 'Table' 组件的样式？
【发布时间】：2018-10-03 00:08:05
【问题描述】：

我现在有一张表格，我想将表格的列标题更改为不同的颜色。

link to table

我尝试过的事情：

<Table className="ant-table-thead">
 ...
</Table>

<Table className="ant-table-content">
...
</Table>

在一个 css 文件里面，我放了：

.ant-table-content {
  background-color: rgb(127, 127, 127);
  color: rgb(127, 127, 127);
 }

我希望在设置这个特定 Table 组件的样式方面得到一些帮助，但是如果您也可以给我一个关于如何在 ant.design 中设置其他组件样式的一般指南（或者我可以在某个地方找到所有可能的 className），那就是非常感谢。

【问题讨论】：

您是否尝试过为元素本身设置样式？
抱歉，我忘了包括我尝试使用 style={{background: rgb(127, 127, 127) color: rgb(127, 127, 127)}} 设置表格组件的样式
嘿，@Hunter690 你做到了吗？

【解决方案1】：

您还可以通过覆盖 default.less 属性来修改 antd 样式。但为此，您需要使用 less 而不是 css。文档会有更多详细信息。

import 'antd/dist/antd.less'
您需要在 webpack 中使用 less 加载器。
还在 package.json 中创建一个指向 .js 文件的主题引用有覆盖。
```
"theme": "./theme.js"
```
将覆盖写入theme.js 文件。

module.exports = () => 
{
    return {
        'primary-color': '#1DA57A',
        'border-radius-base': '2px',
    }
}

【讨论】：

【解决方案2】：

所以我发现总体思路是正确的。对于像 Table 这样的每个 html 组件，通常的做法是定义一个 className。因为我使用的是 Ant-Design，所以我必须有特定的类名。这些类名可以在客户端的 node_modules 文件夹中，在 antd/es 和任何使用的特定组件中找到。然后，index.css 文件列出了所有类名和可编辑的特定属性。

【讨论】：

有这样的例子吗？