[英]How to customize antd theme on runtime?
我已经和 antd 合作了一段时间了。 到目前为止,在我的 react 应用程序中,我已经在 webpack 配置中自定义了 antd 主题,并更新了默认的 less 变量。
或者,如果我使用 create react app,在这种情况下,我通过修改config-overrides.js
变量来自定义主题。
但是现在我的应用程序中有一个功能可以有多个主题,用户可以在运行时选择应用程序的主题,即单击按钮我想更改整个应用程序的主题。 antd 这怎么可能,因为在这种情况下,所有定制都是在构建配置中完成的。
任何帮助,将不胜感激。
这是我浏览过的文档链接。 但它没有为我的用例提供任何东西。
$ npm install --save antd-theme
应用程序.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'),
},
],
})
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.