Skip to content

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

Open
@anyone-yuren

Description

@anyone-yuren

🐛 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]

🚑 其他信息

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions