[FIX] GlobalCSS styling for Modals/Drawers

Author: iamfaran

client/packages/lowcoder-core/lib/index.js

@@ -3235,7 +3235,6 @@ function styleNamespace(id) {
 function evalStyle(id, css, globalStyle) {
     const styleId = styleNamespace(id);
     const prefixId = globalStyle ? id : `.${id}`;
-    console.log(prefixId);
     let compiledCSS = "";
     css.forEach((i) => {
         if (!i.trim()) {
@@ -3252,7 +3251,6 @@ function evalStyle(id, css, globalStyle) {
         document.querySelector("head")?.appendChild(styleNode);
     }
     styleNode.textContent = compiledCSS;
-    console.log("style", styleNode.textContent);
 }
 function clearStyleEval(id) {
     const styleId = id && styleNamespace(id);

client/packages/lowcoder-core/src/eval/utils/evalStyle.ts

@@ -6,8 +6,7 @@ function styleNamespace(id: string) {
 
 export function evalStyle(id: string, css: string[], globalStyle?: boolean) {
   const styleId = styleNamespace(id);
-  const prefixId = globalStyle ? id : `.${id}`
-  console.log(prefixId)
+  const prefixId = globalStyle ? id : `.${id}`;
   let compiledCSS = "";
   css.forEach((i) => {
     if (!i.trim()) {
@@ -25,7 +24,6 @@ export function evalStyle(id: string, css: string[], globalStyle?: boolean) {
     document.querySelector("head")?.appendChild(styleNode);
   }
   styleNode.textContent = compiledCSS;
-  console.log("style",styleNode.textContent)
 }
 
 export function clearStyleEval(id?: string) {

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 && (

client/packages/lowcoder/src/comps/hooks/modalComp.tsx

@@ -116,7 +116,6 @@ let TmpModalComp = (function () {
     (props, dispatch) => {
       const userViewMode = useUserViewMode();
       const appID = useApplicationId();
-      console.log("APP", appID);
       const bodyStyle: CSSProperties = { padding: 0 };
       const width = transToPxSize(props.width || DEFAULT_WIDTH);
       let height = undefined;