Fix/style not match (#6521)

* fix: fix style not match when hydrate * chore: add changeset
alibaba · Sep 8, 2023 · a04cc00 · a04cc00
1 parent b748810
commit a04cc00
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/.changeset/metal-readers-drum.md b/.changeset/metal-readers-drum.md
@@ -0,0 +1,5 @@
+---
+'@ice/cache-canvas': patch
+---
+
+fix: fix style not match when hydrate
diff --git a/packages/cache-canvas/src/index.tsx b/packages/cache-canvas/src/index.tsx
@@ -119,10 +119,9 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
           {
             (typeof fallback === 'function') && (<div
               id={`fallback-${id}`}
-              style={isNode || Storage.getItem(cacheKey, { bizID }) ? { display: 'none' } : { display: 'block' }}
             >
               {
-                fallback()
+                (isNode || !Storage.getItem(cacheKey, { bizID })) && fallback()
               }
             </div>)
           }
@@ -155,9 +154,9 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
                   if (base64Data) {
                     const img = document.getElementById('canvas-img-${id}');
                     img && (img.src = base64Data);
-                    fallback && (fallback.style.display = 'none');
-                  } else {
-                    fallback && (fallback.style.display = 'block');
+                    if (fallback && fallback.childNodes[0]) {
+                      fallback.removeChild(fallback.childNodes[0]);
+                    }
                   }
                 `,
               }}