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

Question

我现在有一个 table，我想将 table 的列 headers 更改为不同的颜色。

我尝试过的事情：

<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，将不胜感激。

Answer 1

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

Answer 2

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

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

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

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

How to change the style of an ant.design 'Table' component?

html-table

classname

antd

我尝试过的事情：

在 css 文件中，我输入：