如何在 Ant Design 中使用 ConfigProvider 应用我的自定义主题？

Question

我们正在使用 React 和 Ant Design 开发一个使用界面。我们想覆盖默认的主题和颜色。作为示例，我们定义了一个名为 theme 的数组。有 4 个不同的主题作为对象。我定义了一个按钮来更改主题。阅读官方文档，我在 App.js 中包含了以下代码来覆盖默认主题，但没有成功。

ConfigProvider.config(
 {
  theme:theme
 }
)

任何人都可以帮助我覆盖默认主题而不需要更少或任何其他东西，而只是使用 ConfigProvider 吗？

import "./App.css";
import "antd/dist/antd.css";
import { ConfigProvider } from "antd";
import { ThemeProvider } from "styled-components";
import ChangeTheme from "./components/ChangeTheme";
import { useContext } from "react";
import { AppContext } from "./_context";

const App = () => {
const { theme } = useContext(AppContext);
ConfigProvider.config({
theme: theme,
});
return (
<ThemeProvider theme={theme}>
  <ConfigProvider>
    <div className="App">
      <ChangeTheme />
    </div>
  </ConfigProvider>
</ThemeProvider>
);
};

export default App;

Answer 1

第一步

您需要导入antd.variable.min.css根文件之一，就像文档src/index.js中推荐的那样，

导入 'antd/dist/antd.variable.min.css';

第二步

ConfigProvider您还需要导入antd src/index.js：

从 'antd' 导入 { ConfigProvider }；

第三步

那么你需要在如下config方法中修改主题变量：ConfigProvider

ConfigProvider.config({ 主题: { PrimaryColor: "#f00" } });

ps您可以修改的变量theme是：

• 原色
• 错误颜色
• 信息颜色
• 加工颜色
• 成功颜色
• 警告颜色

第四步

最后你将组件ConfigProvider包裹<App/>在src/index.js

<ConfigProvider>
    {/* some other codes you might have */}
    <App />
</ConfigProvider>