如何在运行时自定义 antd 主题？答案

【问题标题】：How to customize antd theme on runtime?如何在运行时自定义 antd 主题？
【发布时间】：2019-07-20 13:19:29
【问题描述】：

我已经使用 antd 有一段时间了。到目前为止，在我的 react 应用程序中，我已经在 webpack 配置中自定义了 antd 主题，并更新了默认的 less 变量。

或者如果我使用创建反应应用程序，在这种情况下，我通过修改 config-overrides.js 中的变量来自定义主题。

但是现在我的应用程序中有一个具有多个主题的功能，用户可以在运行时选择应用程序的主题，即单击按钮时我想更改整个应用程序的主题。 antd 怎么可能做到这一点，因为在这种情况下，所有的定制都是在构建配置中完成的。

任何帮助将不胜感激。

这是我浏览过的文档link。但它没有为我的用例提供任何东西。

【问题讨论】：

如何创建一个 HOC 作为主题提供者，从用户选择中选择返回通过 AntD 主题的常规 App，或者，在用户选择 MaterialUI 主题的情况下，HOC 会return MuiTheme 提供者来包装整个应用程序吗？
@SultanH。我已经更新了我的问题，请不要将它与 material-ui 混合使用。
使用 antd 即使使用 HOC，主题也不会改变，因为自定义是在 webpack 配置中完成的，用于构建。而这个配置其实就是在修改antd less变量。
但是，那不会只影响 AntD 组件吗？
是的，但考虑到我的用例，我不想在材料 ui 主题和 antd 主题之间进行选择。我在问题中编辑了它。基本上我想在 antd 主题之间进行选择，以便应用程序支持多个 antd 主题。所以应用程序是用 antd 构建的，现在我想要多个主题。

标签： javascript reactjs customization antd

【解决方案1】：

$ npm install --save antd-theme

app.jsx

import { Button, Select } from 'antd';
import { ThemeProvider, useTheme } from 'antd-theme';
import React from 'react';
import ReactDOM from 'react-dom';
import { SketchPicker } from 'react-color';

const initialTheme = {
  name: 'default',
  variables: { 'primary-color': '#00ff00' },
};

const ThemeSelect = () => {
  const [{ name, variables, themes }, setTheme] = useTheme();

  return (
    <>
      <Select
        style={{ width: 100 }}
        value={name}
        onChange={
          (theme) => setTheme({ name: theme, variables })
        }
      >
        {
          themes.map(
            ({ name }) => (
              <Select.Option key={name} value={name}>
                {name}
              </Select.Option>
            )
          )
        }
      </Select>
      <SketchPicker
        color={variables['primary-color']}
        onChange={(value) => {
          // Will update all css attributes affected by primary-color
          setTheme({ name, variables: { 'primary-color': value.hex } });
        }}
      />
    </>
  );
};

const App = () => {
  const [theme, setTheme] = React.useState(initialTheme);
  return (
    <ThemeProvider
      theme={theme}
      onChange={(value) => setTheme(value)}
    >
      <ThemeSelect />
      <Button type="primary">Button</Button>
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

config-overrides.js

const { override, fixBabelImports, addLessLoader, addPostcssPlugins, adjustStyleLoaders, addWebpackPlugin } = require('customize-cra');

const AntdThemePlugin = require('antd-theme/plugin');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
  }),
  adjustStyleLoaders(
    (loaders) => {
      loaders.use[0] = {
        loader: AntdThemePlugin.loader
      }
    }
  ),
  addWebpackPlugin(
    new AntdThemePlugin({
      variables: ['primary-color'],
      themes: [
        {
          name: 'dark',
          filename: require.resolve('antd/lib/style/themes/dark.less'),
        },
        {
          name: 'compact',
          filename: require.resolve('antd/lib/style/themes/compact.less'),
        },
      ],
    })
  ),
);

【讨论】：