antd-style
antd-style copied to clipboard
🐛[BUG] ant-design升级到最新版 5.20.1后,主题切换失效了(ThemeProvider)
🐛 bug 描述
import { ThemeProvider } from 'antd-style';
import { v1CommonGetEnumDictionary } from 'apis';
import { useEffect, useState } from 'react';
import { HashRouter, RouterProvider } from 'react-router-dom';
import { useGlobalStore, useRcsGlobalStore } from 'store';
import { GlobalConfig } from 'ui';
import cyanImg from '@/assets/images/cyan-blur.png';
import redImg from '@/assets/images/red-blur.png';
import router, { Router } from '@/router';
import CustomGlobal from '@/styles/GlobalPager';
import LoadingPage from './components/LoadingPage';
function App() {
const preset = useGlobalStore((state) => state.preset);
const setDict = useRcsGlobalStore((state) => state.setDict);
const [loading, setLoading] = useState(true);
useEffect(() => {
// 异步操作模拟(例如数据加载、初始化等)
const asyncOperation = async () => {
// 模拟异步操作
await new Promise((resolve) => {
setTimeout(resolve, 3000);
});
// 完成异步操作后,切换到主应用
setLoading(false);
};
const getCommonDict = async () => {
const dict = await v1CommonGetEnumDictionary({});
Object.keys(dict).length && setDict(dict);
};
asyncOperation();
getCommonDict();
}, []); // 仅在组件挂载时执行
console.log(preset);
return (
<GlobalConfig>
<ThemeProvider
defaultThemeMode='light'
theme={{
token: {
colorPrimary: preset,
colorInfo: '#00B8D9',
colorSuccess: '#22C55E',
colorWarning: '#FFAB00',
colorError: '#FF5630',
colorLink: preset,
},
}}
customToken={{
colorDefault: '#212b36',
paperRedImg: redImg as string,
paperCyanImg: cyanImg as string,
}}
>
<CustomGlobal />
{loading ? <LoadingPage /> : <RouterProvider router={router} />}
{/* {loading ? (
<LoadingPage />
) : (
<HashRouter>
<Router />
</HashRouter>
)} */}
</ThemeProvider>
</GlobalConfig>
);
}
export default App;
preset是有变化的,之前antd:5.12版本是有效的,升级到5.20.1后,主题切换失效了。
📷 复现步骤
🏞 期望结果
💻 复现代码
© 版本信息
- antd-style 版本: [e.g. 3.6.1]
- 浏览器环境
- 开发环境 [e.g. mac OS]