Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛[BUG] ant-design升级到最新版 5.20.1后,主题切换失效了(ThemeProvider) #162

Open
anyone-yuren opened this issue Aug 20, 2024 · 1 comment

Comments

@anyone-yuren
Copy link

anyone-yuren commented Aug 20, 2024

🐛 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后,主题切换失效了。

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

  • antd-style 版本: [e.g. 3.6.1]
  • 浏览器环境
  • 开发环境 [e.g. mac OS]

🚑 其他信息

@arvinxx
Copy link
Collaborator

arvinxx commented Aug 20, 2024

给个可复现的 demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants