✨ feat: 支持嵌套Provider 后还能获得准确的 theme 值

src/containers/ThemeProvider/ThemeSwitcher.tsx

@@ -1,7 +1,8 @@
-import { FC, memo, ReactNode, useCallback, useLayoutEffect } from 'react';
+import { FC, memo, ReactNode, useCallback, useLayoutEffect, useMemo } from 'react';
 import useControlledState from 'use-merge-value';
 
 import { ThemeModeContext } from '@/context';
+import { useTheme } from '@/hooks';
 import { ThemeAppearance, ThemeMode } from '@/types';
 
 let darkThemeMatch: MediaQueryList;
@@ -32,11 +33,18 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
     appearance: appearanceProp,
     defaultAppearance,
     onAppearanceChange,
-    themeMode = 'light',
+    themeMode: themeModeProps,
   }) => {
+    const { appearance: upperAppearance, themeMode: upperThemeMode } = useTheme();
+
+    const themeMode = useMemo(
+      () => themeModeProps ?? upperThemeMode,
+      [themeModeProps, upperThemeMode],
+    );
+
     const [appearance, setAppearance] = useControlledState<ThemeAppearance>('light', {
       value: appearanceProp,
-      defaultValue: defaultAppearance,
+      defaultValue: defaultAppearance ?? upperAppearance,
       onChange: onAppearanceChange,
     });
 

tests/hooks/useTheme.test.tsx

@@ -16,11 +16,13 @@ describe('useTheme', () => {
     expect(result.current.stylish).toEqual({});
   });
 
-  it('嵌套 Provider 后能拿到准确的值', () => {
+  it('嵌套 Provider 后能拿到准确的主题值', () => {
     const Wrapper: FC<PropsWithChildren> = ({ children }) => {
       return (
         <ThemeProvider themeMode={'dark'}>
-          <ThemeProvider prefixCls={'kitchen'}>{children}</ThemeProvider>
+          <ThemeProvider defaultAppearance={'light'} prefixCls={'kitchen'}>
+            {children}
+          </ThemeProvider>
         </ThemeProvider>
       );
     };