diff --git a/src/factories/createThemeProvider/index.tsx b/src/factories/createThemeProvider/index.tsx index afd91af7..f723e472 100644 --- a/src/factories/createThemeProvider/index.tsx +++ b/src/factories/createThemeProvider/index.tsx @@ -1,8 +1,7 @@ -import { Context, memo, ReactElement } from 'react'; +import { Context, memo, ReactElement, useContext } from 'react'; -import { createUseTheme } from '@/factories/createUseTheme'; import { DEFAULT_THEME_CONTEXT, DEFAULT_THEME_PROVIDER } from '@/functions/setupStyled'; -import { StyledConfig } from '@/types'; +import { StyledConfig, StyleEngine, UseTheme } from '@/types'; import { createStyledThemeProvider } from '@/factories/createStyledThemeProvider'; import AntdProvider from './AntdProvider'; @@ -14,9 +13,8 @@ export * from './type'; interface CreateThemeProviderOptions { styledConfig?: StyledConfig; - CustomThemeContext: Context; - prefixCls?: string; - customToken: ThemeProviderProps['customToken']; + StyleEngineContext: Context; + useTheme: UseTheme; } export const createThemeProvider = ( @@ -27,6 +25,8 @@ export const createThemeProvider = ( ? createStyledThemeProvider(option.styledConfig) : undefined; + const { StyleEngineContext } = option; + return memo( ({ children, @@ -45,42 +45,50 @@ export const createThemeProvider = ( themeMode, styled, }) => { - const useTheme = createUseTheme({ - prefixCls: prefixCls || option.prefixCls, - styledThemeContext: - styled?.ThemeContext || option.styledConfig?.ThemeContext || DEFAULT_THEME_CONTEXT, - CustomThemeContext: option.CustomThemeContext, - }); + const { + prefixCls: defaultPrefixCls, + StyledThemeContext, + CustomThemeContext, + } = useContext(StyleEngineContext); + const defaultCustomToken = useContext(CustomThemeContext); const StyledThemeProvider = styled ? createStyledThemeProvider(styled) : DefaultStyledThemeProvider || DEFAULT_THEME_PROVIDER; return ( - - - - {children} - - - + + {children} + + + + ); }, ); diff --git a/src/factories/createUseTheme.ts b/src/factories/createUseTheme.ts index d6ff3ebd..674ad215 100644 --- a/src/factories/createUseTheme.ts +++ b/src/factories/createUseTheme.ts @@ -1,4 +1,4 @@ -import { Theme } from '@/types'; +import { StyleEngine, Theme } from '@/types'; import { Context, useContext, useMemo } from 'react'; import { DEFAULT_THEME_CONTEXT } from '@/functions/setupStyled'; @@ -6,19 +6,18 @@ import { useAntdTheme } from '@/hooks/useAntdTheme'; import { useThemeMode } from '@/hooks/useThemeMode'; interface CreateUseThemeOptions { - prefixCls?: string; - CustomThemeContext: Context; - styledThemeContext?: Context; + StyleEngineContext: Context; } export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => { - const { prefixCls, styledThemeContext, CustomThemeContext } = options; + const { StyleEngineContext } = options; + const { StyledThemeContext, CustomThemeContext, prefixCls } = useContext(StyleEngineContext); + const antdTheme = useAntdTheme(); const themeState = useThemeMode(); const defaultCustomTheme = useContext(CustomThemeContext); - - const styledTheme = useContext(styledThemeContext ?? DEFAULT_THEME_CONTEXT) || {}; + const styledTheme = useContext(StyledThemeContext ?? DEFAULT_THEME_CONTEXT) || {}; const initTheme = useMemo( () => ({ diff --git a/src/functions/createInstance.ts b/src/functions/createInstance.ts index d936feaa..bbc88f9c 100644 --- a/src/functions/createInstance.ts +++ b/src/functions/createInstance.ts @@ -10,7 +10,7 @@ import { createStylesFactory } from '@/factories/createStyles'; import { createThemeProvider, ThemeProviderProps } from '@/factories/createThemeProvider'; import { createUseTheme } from '@/factories/createUseTheme'; -import { HashPriority, StyledConfig, StyleManager } from '@/types'; +import { HashPriority, StyledConfig, StyleEngine, StyleManager } from '@/types'; // 为 SSR 添加一个全局的 cacheManager,用于统一抽取 ssr 样式 declare global { @@ -72,26 +72,28 @@ export const createInstance = (options: CreateOptions) => { const styledThemeContext = options.styled?.ThemeContext; - const useTheme = createUseTheme({ - prefixCls: options?.prefixCls, + const StyleEngineContext = createContext({ CustomThemeContext, - styledThemeContext, + StyledThemeContext: styledThemeContext, + prefixCls: options?.prefixCls, }); + const useTheme = createUseTheme({ StyleEngineContext }); + const createStyles = createStylesFactory({ cache, hashPriority: options.hashPriority, useTheme, }); + const createGlobalStyle = createGlobalStyleFactory(useTheme); const createStylish = createStylishFactory(createStyles); const ThemeProvider = createThemeProvider({ styledConfig: options.styled, - CustomThemeContext, - prefixCls: options.prefixCls, - customToken: options.customToken, + StyleEngineContext, + useTheme, }); // ******** 上面这些都和主题相关,如果做了任何改动,都需要排查一遍 ************ // diff --git a/src/types/styled.ts b/src/types/styled.ts index 09df11ab..dea46b62 100644 --- a/src/types/styled.ts +++ b/src/types/styled.ts @@ -14,3 +14,9 @@ export interface StyledConfig { } export type StyledThemeProvider = FC<{ theme: Theme; children: ReactNode }>; + +export interface StyleEngine { + CustomThemeContext: Context; + StyledThemeContext?: Context; + prefixCls?: string; +}