在VueJS中使用JS定義的名稱作為CSS變數的解決方案。

Question

我正在使用Vuetify，它為每個主題顏色（如--v-theme-primary）創建CSS變數。我希望能夠在CSS中將顏色設定為--v-theme-{something}，並且{something}的值來自於JS。例如：

<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>

 [[v-bind(color)]] 是無效的語法，我只是為了演示而提出的。我希望能夠在那裡放置來自顏色引用的顏色名稱或其他內容，以便我可以在CSS中使用 var(--v-theme-{color})，其中顏色來自於JS。在範例中，它將變為 var(--v-theme-primary)。

你有什麼想法嗎？這種做法是否可行？

Answer 1

你可以為CSS值建立一個計算屬性。

你也可以移除 :class="$style['colored-text']"，直接使用 class="colored-text"。

<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>

sfc example