[FIX] GlobalCSS styling for Modals/Drawers

iamfaran · iamfaran · commit a7e34c9e68b4 · 2025-03-20T22:39:08.000+05:00
diff --git a/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts b/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts
@@ -6,7 +6,7 @@ function styleNamespace(id: string) {
 
 export function evalStyle(id: string, css: string[], globalStyle?: boolean) {
   const styleId = styleNamespace(id);
-  const prefixId = globalStyle ? id : `#${id}`
+  const prefixId = globalStyle ? id : `.${id}`;
   let compiledCSS = "";
   css.forEach((i) => {
     if (!i.trim()) {
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -26,6 +26,8 @@ import { isNumeric } from "util/stringUtils";
 import { NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { title } from "process";
 import { SliderControl } from "../controls/sliderControl";
+import clsx from "clsx";
+import { useApplicationId } from "util/hooks";
 
 const EventOptions = [closeEvent] as const;
 
@@ -119,6 +121,7 @@ let TmpDrawerComp = (function () {
       const isTopBom = ["top", "bottom"].includes(props.placement);
       const { items, ...otherContainerProps } = props.container;
       const userViewMode = useUserViewMode();
+      const appID = useApplicationId();
       const resizable = !userViewMode && (!isTopBom || !props.autoHeight);
       const onResizeStop = useCallback(
         (
@@ -172,7 +175,7 @@ let TmpDrawerComp = (function () {
               zIndex={Layers.drawer}
               maskClosable={props.maskClosable}
               mask={props.showMask}
-              className={props.className as string}
+              className={clsx(`app-${appID}`, props.className)}
               data-testid={props.dataTestId as string}
             >
             {props.toggleClose && (
diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
@@ -24,6 +24,8 @@ import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "comps/generators";
 import { SliderControl } from "../controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
+import clsx from "clsx";
+import { useApplicationId } from "util/hooks";
 
 const EventOptions = [
   { label: trans("modalComp.open"), value: "open", description: trans("modalComp.openDesc") },
@@ -113,6 +115,7 @@ let TmpModalComp = (function () {
     },
     (props, dispatch) => {
       const userViewMode = useUserViewMode();
+      const appID = useApplicationId();
       const bodyStyle: CSSProperties = { padding: 0 };
       const width = transToPxSize(props.width || DEFAULT_WIDTH);
       let height = undefined;
@@ -177,7 +180,7 @@ let TmpModalComp = (function () {
               zIndex={Layers.modal}
               modalRender={(node) => <ModalStyled $style={props.style} $modalScrollbar={props.modalScrollbar}>{node}</ModalStyled>}
               mask={props.showMask}
-              className={props.className as string}
+              className={clsx(`app-${appID}`, props.className)}
               data-testid={props.dataTestId as string}
             >
               <InnerGrid
