如何在运行时自定义antd主题? [英] How to customize antd theme on runtime?

问题描述

我已经与antd合作了一段时间了.到目前为止，在我的react应用程序中，我已经在webpack配置中自定义了antd主题，并更新了默认的较少变量.

I have been working with antd for quite sometime now. So far in my react app I have customized antd theme in webpack configuration and have updated default less variables.

或者如果我使用create react应用程序，那么在那种情况下，我通过修改 config-overrides.js 中的变量来自定义了主题.

Or If Im using create react app, in that case I customized the theme by modifyling variables in config-overrides.js.

但是现在我的应用程序中有一个功能可以包含多个主题，并且用户可以在运行时选择应用程序的主题，即单击要更改整个应用程序主题的按钮.antd如何做到这一点，因为在这种情况下，所有自定义操作都是在构建配置中完成的.

But Now I have a feature in my app to have multiple themes and the user could choose the theme of the application on runtime i-e on clicking a button I want to change the theme of the entire application. How is this possible with antd since in its case all the customization is done in the build configuration.

任何帮助将不胜感激.

这是我浏览过的文档链接.但这并没有为我的用例提供任何帮助.

Here's the documentation link I have gone through. But it doesn't provide anything for my usecase.

推荐答案

$ 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

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'),
        },
      ],
    })
  ),
);

这篇关于如何在运行时自定义antd主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！