antd全局主题颜色设置

Question

我刚开始接触antd，想把全局主题设置成antd提供的颜色方案。现在我正在用Django、React和antd来开发一个应用。

我已经安装了颜色包：

npm install @ant-design/colors --save

然后我把颜色方案添加到了我的Layout.js文件中，也就是我的默认布局：

import { purple } from '@ant-design/colors';

这在控制台中显示出来了

console.log(purple);
console.log(purple.primary);

但是我在想怎么才能让这个颜色方案覆盖默认的颜色，显示紫色的颜色。

我尝试在主题中包含：

const theme = { primary: purple[5] };

我也尝试把它添加到token中：

const {
    token: { purple, colorBgContainer, borderRadiusLG },
} = theme.useToken();

Answer 1

我从antd的网站上找到了答案：

https://ant.design/docs/react/customize-theme#customize-design-token

通过把布局包裹在一个叫做ConfigProvider的组件里：

<ConfigProvider
        theme={{
        token: {
            // Seed Token
            colorPrimary: purple.primary,
        },
        }}
    >
<Layout>
  ...
</Layout>
</ConfigProvider>

这样就可以设置全局的颜色主题了。如果有更好的方法，请告诉我。

Answer 2

要把整个应用的主题设置成 antd 提供的颜色方案，你可以使用 antd 的 ConfigProvider 组件。下面是具体的做法：

import { ConfigProvider } from 'antd';
import { purple } from '@ant-design/colors';

// Wrap your entire application with ConfigProvider
ReactDOM.render(
  <ConfigProvider theme={{ primary: purple[5] }}>
    <App />
  </ConfigProvider>,
  document.getElementById('root')
);

通过把你的整个应用包裹在 ConfigProvider 里，你可以设置一个主题属性来定义主要颜色。在这个例子中，紫色被设置为主要颜色。

这样做会把 antd 组件默认的颜色替换成你选择的颜色方案。现在，你应用中的所有 antd 组件都会使用紫色作为它们的主要颜色。