<p>我正在使用Vuetify，它为每个主题颜色（如--v-theme-primary）创建CSS变量。我希望能够在CSS中将颜色设置为--v-theme-{something}，并且{something}的值来自于JS。例如：</p> <pre class="brush:js;toolbar:false;"><template> <div :class="$style['colored-text']">Asd</div> </template> <script lang="ts" setup> const color = ref("primary") </script> <style lang="scss" module> .colored-text { background-color: var(--v-theme-[[v-bind(color)]]); } </style> </pre> <p> [[v-bind(color)]] 是无效的语法，我只是为了演示而提出的。我希望能够在那里放置来自颜色引用的颜色名称或其他内容，以便我可以在CSS中使用 var(--v-theme-{color})，其中颜色来自于JS。在示例中，它将变为 var(--v-theme-primary)。<br /><br />你有什么想法吗？这种做法是否可行？</p><p><br /></p>

<template>
  <div class="colored-text">Asd</div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  const color = ref("primary")
  const bgColor = computed(()=>`var(--v-theme-${color}`)
</script>

<style>
.colored-text {
  background-color: v-bind(bgColor);
}
</style>