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

查看:38
本文介绍了如何在运行时自定义 antd 主题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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 app,在这种情况下,我通过修改 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.

任何帮助将不胜感激.

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

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆