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

Question

我目前有一个表格，我想将表格的列标题更改为其他颜色。

link to table

我尝试过的事情：

1. <Table className="ant-table-thead"> ... </Table>
2. <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的地方），它将是非常感谢。

Answer 1

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

Answer 2

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

1. 导入“ antd / dist / antd.less”
2. 您需要在Webpack中减少加载程序。

3. 还可以在package.json中创建指向.js文件的主题引用 具有优先选项。

   "theme": "./theme.js"
   

4. 写出theme.js文件中的替代内容。

   module.exports =（）=> { 返回{     '原色'：'＃1DA57A'，     'border-radius-base'：'2px'，   }; }