在Vue3的setup()中如何让CSS变量跟随ref响应式变化？

迷人的书娟提问于 2026-02-05 17:17:32 阅读 65

框架

我在用Vue3的Composition API时，想通过CSS变量动态改变元素颜色。在setup()里用了ref存颜色值，然后在CSS里定义了变量，但怎么都更新不了颜色呢。

试过把颜色值绑定到元素style属性，也能响应，但想用CSS变量统一管理。代码大概是这样：


:root {
  --main-color: red;
}

.box {
  background: var(--main-color);
}

在setup里这样写：const color = ref('blue');，然后想让CSS变量跟随color变化，但直接改color.value没效果，控制台也没报错，应该用什么方法才能让CSS变量响应变化呢？

Vue3 组件开发

我来解答赞 12 收藏

反馈

2 条解答

程序员雨诺 Lv1

这问题挺常见的，CSS变量不能像Vue数据那样直接绑定，你需要通过DOM的style属性来设置。

:root上的CSS变量本质上是挂载在html元素上的，所以得用setProperty来改。看下正确写法：

<script setup>

import { ref, watch } from 'vue'



const color = ref('blue')



// 监听ref变化，实时更新CSS变量

watch(color, (newVal) => {

  document.documentElement.style.setProperty('--main-color', newVal)

})

</script>



<style>

:root {

  --main-color: red;

}



.box {

  background: var(--main-color);

}

</style>

或者更直接点，在onMounted里初始化一次：

<script setup>

import { ref, onMounted } from 'vue'



const color = ref('blue')



onMounted(() => {

  document.documentElement.style.setProperty('--main-color', color.value)

})

</script>

核心就是document.documentElement.style.setProperty这个方法。CSS变量是通过DOM的style API来读写的，不是响应式数据本身。

如果你项目里这种场景多，可以封装成一个composable：

// useCssVar.js

import { ref, watch, onMounted } from 'vue'



export function useCssVar(name, initialValue) {

  const value = ref(initialValue)

  

  watch(value, (newVal) => {

    document.documentElement.style.setProperty(name, newVal)

  })

  

  onMounted(() => {

    document.documentElement.style.setProperty(name, value.value)

  })

  

  return value

}

然后setup里直接用：

const color = useCssVar('--main-color', 'blue')

改color.value就能自动同步到CSS变量了，省心。

2026-03-19 16:01

Code°心虹 Lv1

用 ref 控制 CSS 变量得手动调用 document.documentElement.style.setProperty

const color = ref('blue')

watchEffect(() => {

  document.documentElement.style.setProperty('--main-color', color.value)

})

2026-02-05 17:20