diff --git a/packages/varlet-ui/src/app-bar/AppBar.vue b/packages/varlet-ui/src/app-bar/AppBar.vue
index 4f2d1118b8f..25e15091d19 100644
--- a/packages/varlet-ui/src/app-bar/AppBar.vue
+++ b/packages/varlet-ui/src/app-bar/AppBar.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onUpdated, computed, type StyleValue } from 'vue'
+import { defineComponent, ref, onUpdated, computed, CSSProperties } from 'vue'
 import { props } from './props'
 import { createNamespace, formatElevation } from '../utils/components'
 import { onSmartMounted } from '@varlet/use'
@@ -49,7 +49,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const paddingLeft = ref<number | undefined>()
     const paddingRight = ref<number | undefined>()
-    const rootStyles = computed<StyleValue>(() => {
+    const rootStyles = computed<CSSProperties>(() => {
       const { image, color, textColor, imageLinearGradient } = props
 
       if (image != null) {
diff --git a/packages/varlet-ui/src/avatar-group/AvatarGroup.vue b/packages/varlet-ui/src/avatar-group/AvatarGroup.vue
index d5f4ac94f11..3e86aaab7fb 100644
--- a/packages/varlet-ui/src/avatar-group/AvatarGroup.vue
+++ b/packages/varlet-ui/src/avatar-group/AvatarGroup.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, type StyleValue } from 'vue'
+import { defineComponent, computed, CSSProperties } from 'vue'
 import { props } from './props'
 import { createNamespace } from '../utils/components'
 import { toSizeUnit } from '../utils/elements'
@@ -16,14 +16,14 @@ export default defineComponent({
   name,
   props,
   setup(props) {
-    const rootStyles = computed<StyleValue>(() => {
+    const rootStyles = computed<CSSProperties>(() => {
       if (props.offset == null) {
         return {}
       }
 
       return {
         '--avatar-group-offset': toSizeUnit(props.offset),
-      } as StyleValue
+      }
     })
 
     return {
diff --git a/packages/varlet-ui/src/cell/Cell.vue b/packages/varlet-ui/src/cell/Cell.vue
index 1e311c53bbd..977b773db2e 100644
--- a/packages/varlet-ui/src/cell/Cell.vue
+++ b/packages/varlet-ui/src/cell/Cell.vue
@@ -34,7 +34,7 @@
 <script lang="ts">
 import VarIcon from '../icon'
 import Ripple from '../ripple'
-import { computed, defineComponent, type StyleValue } from 'vue'
+import { computed, defineComponent, CSSProperties } from 'vue'
 import { props } from './props'
 import { call, createNamespace } from '../utils/components'
 import { toSizeUnit } from '../utils/elements'
@@ -47,7 +47,7 @@ export default defineComponent({
   directives: { Ripple },
   props,
   setup(props) {
-    const borderOffsetStyles = computed<StyleValue>(() => {
+    const borderOffsetStyles = computed<CSSProperties>(() => {
       if (props.borderOffset == null) {
         return {}
       }
@@ -55,7 +55,7 @@ export default defineComponent({
       return {
         '--cell-border-left': toSizeUnit(props.borderOffset),
         '--cell-border-right': toSizeUnit(props.borderOffset),
-      } as StyleValue
+      }
     })
 
     function handleClick(e: Event) {