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

Question

我们正在开发一个使用 React 和 Ant Design 的界面。我们想覆盖默认的主题和颜色。作为示例，我们定义了一个名为主题的数组。有 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，例如document 中推荐的src/index.js，

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

第二步

还需要在src/index.js中导入antd的ConfigProvider：

从 'antd' 导入 { ConfigProvider }；

第三步

那么你需要修改ConfigProvider的config方法中的主题变量，如下所示：

ConfigProvider.config({ theme: { primaryColor: "#f00" } });

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

• 原色
• 错误颜色
• 信息颜色
• 处理颜色
• 成功颜色
• 警告颜色

第四步

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

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