diff --git a/src/containers/ThemeProvider/ThemeSwitcher.tsx b/src/containers/ThemeProvider/ThemeSwitcher.tsx index 4b85fc09..54dffbc5 100644 --- a/src/containers/ThemeProvider/ThemeSwitcher.tsx +++ b/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 = 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('light', { value: appearanceProp, - defaultValue: defaultAppearance, + defaultValue: defaultAppearance ?? upperAppearance, onChange: onAppearanceChange, }); diff --git a/tests/hooks/useTheme.test.tsx b/tests/hooks/useTheme.test.tsx index 86ccdef2..b9a2e6a1 100644 --- a/tests/hooks/useTheme.test.tsx +++ b/tests/hooks/useTheme.test.tsx @@ -16,11 +16,13 @@ describe('useTheme', () => { expect(result.current.stylish).toEqual({}); }); - it('嵌套 Provider 后能拿到准确的值', () => { + it('嵌套 Provider 后能拿到准确的主题值', () => { const Wrapper: FC = ({ children }) => { return ( - {children} + + {children} + ); };