Использование V-bind для установки переменных CSS в проблеме композиции Vue 3

Question

Заранее прошу прощения, если ответ очевиден. Признаюсь, я никогда по-настоящему не понимал сути переменных CSS!

Что я пытаюсь сделать: использовать API композиции Vue 3 v-bind, чтобы переопределить значение CSS элемента плюс (не думаю, что пакет имеет значение, но на всякий случай) динамически с использованием var.

Вот тут я в тупике:

Это работает:

      <template>
    <span class="test">
        TEST
    </span>
    <el-button type="primary">Primary</el-button>
</template>

<script setup lang="ts">
const color = 'green';
</script>

<style>
:root {
    --el-color-primary: green;
}

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

В приведенном выше коде переопределяются оба основных цвета, а класс .text используетcolorзначение, как и ожидалось.

Однако, если я попробую:

      <style>
:root {
    --el-color-primary: v-bind(color);
}
</style>

Он «видится» как не имеющий по умолчанию исходного цвета (синего). однако он не использует ожидаемое значение (зеленый), он просто не использует цвет.

Очень благодарен всем, кто может видеть то, чего не вижу я!

РЕДАКТИРОВАТЬ: Повторю, что первый блок кода, который я опубликовал, работает! Мой вопрос пытается выяснить, почему второй блок кода --el-color-primary: v-bind(color);не работает.

Answer 1

Если вы хотите изменить переменные CSS с помощьюv-bind()— установите эту переменную в какую-нибудь обертку в компоненте.
Если вы хотите изменить переменные CSS в:root- использоватьstyle.setProperty().

Я привел пример трех кейсов: Vue SFC Playground.

Answer 2

если вы просто хотите связать CSS в элементе span, используя переменную

      <span class="test">
        TEST
    </span>

я думаю, ты сможешь это сделать

      var color = 'green';
 <span :style="{ color: color }">   TEST</span>

и советы по использованию API композиции

или попробуй это

      <el-button class="primary" type="primary">Primary</el-button>


<script>
import {ref} from "vue";
export default {
setup(){

  const color = ref('green');
 
  return{
      color,
}
}
}
</script>
<style scoped>

.primary {

    color: v-bind(color);
}

</style>