fix styles not working on table and container based comps

raheeliftikhar5 · raheeliftikhar5 · commit caa306539bbd · 2024-10-03T21:16:33.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -29,6 +29,7 @@ import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
 import { StringControl } from "comps/controls/codeControl";
 import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -65,6 +66,7 @@ const childrenMap = {
 // Compatible with old style data 2022-8-15
 const layoutBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props, dispatch);
     return { ...props, dispatch };
   }).build(),
   fixOldStyleData
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -33,7 +33,7 @@ import { darkenColor, isDarkColor, ScrollBar } from "lowcoder-design";
 import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Resizable } from "react-resizable";
 import styled, { css } from "styled-components";
-import { useUserViewMode } from "util/hooks";
+import { useMergeCompStyles, useUserViewMode } from "util/hooks";
 import { TableImplComp } from "./tableComp";
 import { useResizeDetector } from "react-resize-detector";
 import { SlotConfigContext } from "comps/controls/slotControl";
@@ -903,7 +903,6 @@ export function TableCompView(props: {
     updateEmptyRows();
   }, [updateEmptyRows]);
 
-
   const pageDataInfo = useMemo(() => {
     // Data pagination
     let pagedData = data;
@@ -928,6 +927,11 @@ export function TableCompView(props: {
 
   const childrenProps = childrenToProps(comp.children);
 
+  useMergeCompStyles(
+    childrenProps as Record<string, any>,
+    comp.dispatch
+  );
+
   const handleChangeEvent = useCallback(
     (eventName: TableEventOptionValues) => {
       if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) {
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
@@ -28,6 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
 import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -53,6 +54,7 @@ const childrenMap = {
 // Compatible with old style data 2022-8-15
 const TriContainerBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props, dispatch);
     return { ...props, dispatch };
   }).build(),
   fixOldStyleData
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -673,10 +673,10 @@ function calcColors<ColorMap extends Record<string, string>>(
           themeWithDefault.textDark,
           themeWithDefault.textLight
         );
-      } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
-        res[name] = bgColor;
       } else if ((config?.depType || config?.depName) && compTheme?.[name]) {
         res[name] = compTheme[name];
+      } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
+        res[name] = bgColor;
       } else {
         const rest = [];
         config.depName && rest.push(res[config.depName]);
@@ -900,7 +900,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
 
       const appSettingsComp = editorState?.getAppSettingsComp();
       const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
-      const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container || comp?.comp || {};
+      const { appliedThemeId, preventStyleOverwriting } = (comp?.comp || {});
       const appTheme = isPreviewTheme || isDefaultTheme || (!preventStyleOverwriting && !preventAppStylesOverwriting)
         ? theme?.theme
         : defaultTheme;
