fix theme styling issue with active/inactive preventOverwritingStyles flag

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -910,10 +910,6 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
             ...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
             ...(omit(theme?.theme, 'components', 'chart')),
             ...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
-            // ...(
-            //   theme?.theme?.components?.[compType]?.[styleKey]
-            //   // || defaultTheme.components?.[compType]?.[styleKey]
-            // ) as unknown as Record<string, string>
           }
         : defaultTheme.components?.[compType]?.[styleKey];
       const styleProps = (!comp && !compType) || preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -290,7 +290,7 @@ const UIView = React.memo((props: {
   }
 
   useMergeCompStyles(
-    childrenJsonProps as Record<string, any>,
+    childrenProps as Record<string, any>,
     comp.dispatch
   );
 

client/packages/lowcoder/src/comps/utils/themeUtil.ts

@@ -38,10 +38,11 @@ export function setInitialCompStyles({
   const actions: Record<string, any> = {
     appliedThemeId: changeValueAction(themeId || '', true),
   };
+  
   styleKeys.forEach(styleKey => {
     actions[styleKey] = changeValueAction({
       ...(compTheme?.[styleKey] as object || {}),
-      // ...styleProps[styleKey],
+      ...styleProps[styleKey],
     }, true);
   })
 

client/packages/lowcoder/src/util/hooks.ts

@@ -2,6 +2,7 @@ import { AppPathParams } from "constants/applicationConstants";
 import React, {
   Dispatch,
   SetStateAction,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -179,28 +180,49 @@ export function useMergeCompStyles(
   const themeId = theme?.themeId;
   const appSettingsComp = editorState?.getAppSettingsComp();
   const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
-  const { preventStyleOverwriting } = props;
+  const { preventStyleOverwriting, appliedThemeId } = props;
 
   const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style' || 'styles'));
   const styleProps: Record<string, any> = {};
   styleKeys.forEach((key: string) => {
     styleProps[key] = (props as any)[key];
   });
 
+  const mergeStyles = useCallback(
+    ({
+      dispatch,
+      compTheme,
+      styleProps,
+      themeId
+    }: any) => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+        themeId,
+      })
+    },
+    []
+  );
+
   useEffect(() => {
-    if (preventAppStylesOverwriting || preventStyleOverwriting) return;
-    setInitialCompStyles({
+    if (
+      preventAppStylesOverwriting
+      || preventStyleOverwriting
+      || themeId === appliedThemeId
+    ) return;
+    mergeStyles({
       dispatch,
       compTheme,
       styleProps,
       themeId,
-    });
+    })
   }, [
     themeId,
     JSON.stringify(styleProps),
     JSON.stringify(compTheme),
-    setInitialCompStyles,
+    mergeStyles,
     preventAppStylesOverwriting,
     preventStyleOverwriting,
   ]);
-}
+}