如何在Ant Design中通过ConfigProvider应用自定义主题？

核心问题及修复步骤如下：

• 首先删除你代码中引入的antd/dist/antd.css，这是预编译完成的静态全量样式文件，所有变量已经固化，完全不支持动态主题修改。
• ConfigProvider.config()是用于配置全局前缀、全局提示类组件通用属性的静态方法，不支持传入主题配置，主题需要直接作为props传入ConfigProvider组件。
• 你当前代码中的ConfigProvider没有传入任何属性，自然无法应用自定义主题。

注意：仅Ant Design 5.x及以上版本支持纯JS动态配置主题，无需依赖less等额外编译工具，如果你使用的是4.x及更早版本，建议先升级到5.x版本。同时你的自定义主题对象需要符合Ant Design的主题结构，所有全局变量需要放在token字段下才能生效。

修改后完整App.js代码 #

import "./App.css";
// 删除原有的全量静态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);
  // 删除原有的静态config调用
  // ConfigProvider.config({
  //   theme: theme,
  // });
  return (
    <ThemeProvider theme={theme}>
      {/* 直接将主题作为props传入ConfigProvider */}
      <ConfigProvider theme={theme}>
        <div className="App">
          <ChangeTheme />
        </div>
      </ConfigProvider>
    </ThemeProvider>
  );
};

export default App;

主题对象示例（供参考） #

const customTheme = {
  token: {
    // 覆盖主色调
    colorPrimary: '#27ae60',
    // 覆盖全局圆角
    borderRadius: 4,
    // 覆盖成功色
    colorSuccess: '#2ecc71'
  }
}

内容的提问来源于stack exchange，提问作者Balalayka