How to change #app style (v-bind in css)?

[alexbakers]

Hello,

https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

How to change body or html or #app style?

<script setup>
const theme = {
  color: "red",
};
</script>

<template>
  <p>hello</p>
</template>

<style>
#app {
  background-color: v-bind("theme.color");
}
</style>

https://stackblitz.com/edit/daisyui-vue-vite-apzrgv?file=src/App.vue

[baiwusanyu-c]

In fact, CSSVars will not affect the parent. The CSSVars of the child components in the component will not react with the dom of the parent component（see）, and the entire dom tree of Vue is mounted under the root container, so CSSVars does not affect the root container and html tags