是否可以在样式中动态指定类名?

Question

我需要将类名从脚本传递到样式

<script
lang="ts"
setup
>
const className = ref('some-class')
</script>
<style
lang="sass"
module
>
.#{v-bind(className)}--dynamic
pointer-events: none
</style>

在这种情况下，我得到一个错误:错误:期望选择器。.v-bind(className)——dynamic━内插输出错误

UPD:为了澄清，我在各种其他组件中使用该组件，并且我需要类具有从父组件传递的前缀。

Answer 1

@Ilya Degtyarenko你可以在样式中指定你的类，并像这样使用:

<template>
<div :class="[someClass]">
</div>
</template>
<script setup lang="ts">
const a = 10
const someClass = a === 10 ? "success" : "error"
</script>
<style lang="scss">
.success {
}
.error {
}
</style>

Answer 2

在底层，v-bindin style创建了一个CSS变量，该变量可以在元素的style属性中更新，并在CSS规则中用作值:

<p  style="--469af010-theme_color:red;">hello</p>

和

p {
color: var(--469af010-theme_color);
}

并且不能使用CSS var作为类名