Theme: apply theme styles on link comp

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -21,7 +21,10 @@ import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
 import { EditorContext } from "comps/editorState";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const Link = styled(Button)<{
   $style: LinkStyleType;
@@ -85,13 +88,30 @@ const LinkTmpComp = (function () {
     onEvent: ButtonEventHandlerControl,
     disabled: BoolCodeControl,
     loading: BoolCodeControl,
-    style: migrateOldData(styleControl(LinkStyle), fixOldData),
-    animationStyle:styleControl(AnimationStyle),
+    style: migrateOldData(styleControl(LinkStyle, 'style'), fixOldData),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     // chrome86 bug: button children should not contain only empty span
     const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
     return (

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

@@ -860,7 +860,10 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
       const compTheme = compType
-        ? theme?.theme?.components?.[compType]?.[styleKey]
+        ? {
+            ...(defaultTheme.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>,
+            ...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>
+          }
         : undefined;
 
       return calcColors(

client/packages/lowcoder/src/constants/themeConstants.ts

@@ -35,6 +35,13 @@ const table = {
   }
 }
 
+const link = {
+  style: {
+    borderWidth: '0px',
+    background: 'transparent',
+  }
+}
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -61,5 +68,6 @@ export const defaultTheme: ThemeDetail = {
     text,
     input,
     table,
+    link,
   },
 };