From 01aa0539ec19949e6db062cbe00cafbc4ae4ca42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=20=E6=98=8E=E8=BE=89?= <cuis@vip.qq.com>
Date: Thu, 19 May 2022 23:30:07 +0800
Subject: [PATCH] fix: https://github.com/mpflutter/mpflutter/issues/174

---
 .../src/components/basic/decorated_box.ts         | 15 +++++++++------
 packages/mp_dom_runtime/src/components/utils.ts   |  4 ++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/mp_dom_runtime/src/components/basic/decorated_box.ts b/packages/mp_dom_runtime/src/components/basic/decorated_box.ts
index 374891fa..92c11b0c 100644
--- a/packages/mp_dom_runtime/src/components/basic/decorated_box.ts
+++ b/packages/mp_dom_runtime/src/components/basic/decorated_box.ts
@@ -8,10 +8,7 @@ export class DecoratedBox extends ComponentView {
     let style: any = childStyle ?? {};
     if (attributes.color) {
       style.backgroundColor = cssColor(attributes.color);
-    } else {
-      style.backgroundColor = "transparent";
-    }
-    if (attributes.image) {
+    } else if (attributes.image) {
       style.backgroundImage = `url("${(() => {
         if (attributes.image.src) {
           return attributes.image.src;
@@ -46,13 +43,15 @@ export class DecoratedBox extends ComponentView {
         style.backgroundSize = "contain";
       }
       style.backgroundRepeat = "no-repeat";
-    }
-    if (attributes.decoration?.gradient) {
+    } else if (attributes.decoration?.gradient) {
       if (style.backgroundImage) {
         style.backgroundImage = cssGradient(attributes.decoration.gradient) + "," + style.backgroundImage;
       } else {
         style.background = cssGradient(attributes.decoration.gradient);
       }
+    } else {
+      style.backgroundImage = "unset";
+      style.background = "unset";
     }
     if (attributes.decoration?.boxShadow?.[0]) {
       const shadow = attributes.decoration?.boxShadow?.[0];
@@ -65,6 +64,8 @@ export class DecoratedBox extends ComponentView {
       for (const key in s) {
         (style as any)[key] = s[key];
       }
+    } else {
+      style["borderRadius"] = "0px";
     }
     if (attributes.decoration?.border) {
       let s = cssBorder(attributes.decoration.border) as any;
@@ -72,6 +73,8 @@ export class DecoratedBox extends ComponentView {
       for (const key in s) {
         (style as any)[key] = s[key];
       }
+    } else {
+      style["border"] = "none";
     }
     setDOMStyle(target, style);
   }
diff --git a/packages/mp_dom_runtime/src/components/utils.ts b/packages/mp_dom_runtime/src/components/utils.ts
index 5c208bfd..f07622d6 100644
--- a/packages/mp_dom_runtime/src/components/utils.ts
+++ b/packages/mp_dom_runtime/src/components/utils.ts
@@ -43,7 +43,7 @@ export const cssColorHex = (value: string) => {
   return `#${r}${g}${b}`;
 };
 
-export const cssBorderRadius = (value: string) => {
+export const cssBorderRadius = (value: string): any => {
   if (value.indexOf("BorderRadius.circular(") === 0) {
     const trimedValue = value
       .replace("BorderRadius.circular(", "")
@@ -68,7 +68,7 @@ export const cssBorderRadius = (value: string) => {
       borderBottomRightRadius: `${bottomRight}px`,
     };
   } else {
-    return {};
+    return { borderRadius: "0px" };
   }
 };