Fix(design-system): issue with theme provider (#5010)

Talend · Nov 27, 2023 · 88a17d7 · 88a17d7
1 parent e8c64eb
commit 88a17d7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/wicked-panthers-film.md b/.changeset/wicked-panthers-film.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: theme provider override is not working as expected
diff --git a/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx b/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx
@@ -13,7 +13,7 @@ import './ThemeProvider.scss';
 
 export type ThemeProviderProps = PropsWithChildren<{
 	theme?: string;
-	tokensOverride?: React.CSSProperties;
+	tokensOverride?: Record<string, string | number>;
 }>;
 
 export const ThemeProvider = ({
@@ -33,10 +33,18 @@ export const ThemeProvider = ({
 		setSelectedTheme(theme);
 	}, [theme]);
 
+	useEffect(() => {
+		if (tokensOverride) {
+			Object.keys(tokensOverride).forEach(key => {
+				document.body.style.setProperty(key, tokensOverride[key].toString());
+			});
+		}
+	}, [tokensOverride]);
+
 	const switchTheme = (newTheme: string) => setSelectedTheme(newTheme);
 	return (
 		<ThemeContext.Provider value={context.theme ? context : { switchTheme, theme: selectedTheme }}>
-			{tokensOverride ? <div style={tokensOverride}>{children}</div> : children}
+			{children}
 		</ThemeContext.Provider>
 	);
 };