From 0640b4e00282edbf9495af8ebadb2a64873d4ea5 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Wed, 23 Jun 2021 18:36:00 +0800
Subject: [PATCH] fix: fix the bug of style-provider when update

---
 .../src/style-provider/example/index.vue          | 15 +++++++++++----
 packages/varlet-ui/src/style-provider/index.ts    | 14 ++++++++------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/varlet-ui/src/style-provider/example/index.vue b/packages/varlet-ui/src/style-provider/example/index.vue
index 6390b8881c9..8bd8cc40a99 100644
--- a/packages/varlet-ui/src/style-provider/example/index.vue
+++ b/packages/varlet-ui/src/style-provider/example/index.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import Cell from '../../cell'
 import StyleProvider from '../index'
 
@@ -16,10 +17,16 @@ export default {
     [StyleProvider.name]: StyleProvider,
   },
   setup() {
-    const styles = {
-      cellFontSize: '30px',
-      cellBorderColor: 'red'
-    }
+    const styles = ref({})
+
+    onMounted(() => {
+      setTimeout(() => {
+        styles.value = {
+          cellFontSize: '30px',
+          cellBorderColor: 'red'
+        }
+      }, 1500)
+    })
 
     return {
       styles
diff --git a/packages/varlet-ui/src/style-provider/index.ts b/packages/varlet-ui/src/style-provider/index.ts
index 095710f9d18..01f839d4b68 100644
--- a/packages/varlet-ui/src/style-provider/index.ts
+++ b/packages/varlet-ui/src/style-provider/index.ts
@@ -10,13 +10,15 @@ export default defineComponent({
     }
   },
   setup(props, { slots }) {
-    const styles: Record<string, string | number> = Object.entries(props.styleVars).reduce((styles, style) => {
-      const cssVar = `--${kebabCase(style[0])}`
-      styles[cssVar] = style[1] as string | number
+    return () => {
+      const styles: Record<string, string | number> = Object.entries(props.styleVars).reduce((styles, style) => {
+        const cssVar = `--${kebabCase(style[0])}`
+        styles[cssVar] = style[1] as string | number
 
-      return styles
-    }, {} as Record<string, string | number>)
+        return styles
+      }, {} as Record<string, string | number>)
 
-    return () => h('div', { style: styles }, slots.default?.())
+      return h('div', { style: styles }, slots.default?.())
+    }
   }
 })