fix(ThemeProvider): fix rootClassName update (#1231)

gravity-ui · Dec 27, 2023 · 4f0f099 · 4f0f099
1 parent 3180060
commit 4f0f099
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
@@ -38,9 +38,17 @@ export function ThemeProvider({
     ) as RealTheme;
     const themeValue = theme === 'system' ? systemTheme : theme;
 
+    const prevRootClassName = React.useRef('');
+
     React.useEffect(() => {
         if (!scoped) {
-            updateBodyClassName(themeValue, {'native-scrollbar': nativeScrollbar}, rootClassName);
+            updateBodyClassName(
+                themeValue,
+                {'native-scrollbar': nativeScrollbar},
+                rootClassName,
+                prevRootClassName.current,
+            );
+            prevRootClassName.current = rootClassName;
         }
     }, [nativeScrollbar, themeValue, scoped, rootClassName]);
 

diff --git a/src/components/theme/updateBodyClassName.ts b/src/components/theme/updateBodyClassName.ts
@@ -18,6 +18,7 @@ export function updateBodyClassName(
     newTheme: RealTheme,
     modifiers?: Partial<BodyClassNameModifiers>,
     customRootClassName?: string,
+    prevCustomRootClassName?: string,
 ) {
     const bodyEl = document.body;
 
@@ -29,6 +30,15 @@ export function updateBodyClassName(
         bodyEl.classList.add(rootNewClassName);
     }
 
+    if (prevCustomRootClassName) {
+        const parsedPrevCustomRootClassNames = prevCustomRootClassName.split(' ');
+        parsedPrevCustomRootClassNames.forEach((cls) => {
+            if (cls) {
+                bodyEl.classList.remove(cls);
+            }
+        });
+    }
+
     if (customRootClassName) {
         const parsedCustomRootClassNames = customRootClassName.split(' ');
         parsedCustomRootClassNames.forEach((cls) => {