diff --git a/packages/styled/react/src/StyledProvider.tsx b/packages/styled/react/src/StyledProvider.tsx index ec4d689baa..37689a65e7 100644 --- a/packages/styled/react/src/StyledProvider.tsx +++ b/packages/styled/react/src/StyledProvider.tsx @@ -12,6 +12,7 @@ import { createGlobalStyles } from './createGlobalStyles'; import { injectGlobalCssStyle } from './injectInStyle'; import { ThemeContext, useTheme } from './Theme'; import { useSafeLayoutEffect } from './hooks/useSafeLayoutEffect'; +import { resolveThemes } from './createConfig'; type Config = any; let colorModeSet = false; @@ -75,7 +76,7 @@ export const StyledProvider: React.FC<{ inlineStyleMap.current.initialStyleInjected = false; // const id = React.useId(); const currentConfig: any = React.useMemo(() => { - const configWithPlatformSpecificUnits: any = platformSpecificSpaceUnits( + let configWithPlatformSpecificUnits: any = platformSpecificSpaceUnits( config, Platform.OS ); @@ -89,6 +90,10 @@ export const StyledProvider: React.FC<{ Platform.OS ).tokens; }); + + configWithPlatformSpecificUnits = resolveThemes( + configWithPlatformSpecificUnits + ); } return configWithPlatformSpecificUnits; diff --git a/packages/styled/react/src/createConfig.ts b/packages/styled/react/src/createConfig.ts index 970922f097..0aa1e18560 100644 --- a/packages/styled/react/src/createConfig.ts +++ b/packages/styled/react/src/createConfig.ts @@ -85,14 +85,14 @@ export const createConfig = < // newConfig = resolveComponentThemes(config); // } - if (config.themes) { - const newConfigWithThemesResolved = resolveThemes(config); - return newConfigWithThemesResolved as any; - } + // if (config.themes) { + // const newConfigWithThemesResolved = resolveThemes(config); + // return newConfigWithThemesResolved as any; + // } return config as any; }; -const resolveThemes = (config: any) => { +export const resolveThemes = (config: any) => { function removeDollarSign(obj: any) { const newObj: any = {}; for (const key in obj) {