🧐[问题 | question]ant design Pro能否使用token动态主题？

[FishHaveMine]

🧐 问题描述 | Problem description

💻 示例代码 | Sample code

ConfigProvider.config({
theme: {
primaryColor: '#25b864',
},
});
在页面上是生效的，但是
<ConfigProvider
theme={{
token: {
colorPrimary: '#1677ff',
},
}}
>

Theme 1
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
}}
>
Theme 2



就不行，现在antd版本也升级到最新的。如果要使用，应该要怎么处理？

🚑 其他信息 | Other information

OS:
window

Node：

浏览器 | browser：
Chrome

[chenshuai2144]

可以使用 useToken 这个 hook 来获取 Design Token，然后根据需求来动态设置主题颜色。以下是一个使用 useToken 的示例代码：

import React from 'react';
import { Button, theme } from 'antd';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorPrimaryBg,
        padding: token.padding,
        borderRadius: token.borderRadius,
        color: token.colorPrimaryText,
        fontSize: token.fontSize,
      }}
    >
      使用 Design Token
    </div>
  );
};

export default App;

你可以根据具体的需求修改这个示例代码，动态设置主题颜色。希望对你有帮助！

[chenshuai2144]

默认就支持的哦