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

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

框架

我在用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 组件开发

我来解答赞 7 收藏

反馈

1 条解答

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