VueJS에서 JS 정의 이름을 CSS 변수로 사용하는 솔루션입니다.
<p>저는 각 테마 색상에 대한 CSS 변수를 생성하는 Vuetify를 사용하고 있습니다(예: --v-theme-primary). CSS에서 색상을 --v-theme-{something}으로 설정하고 JS에서 {something} 값을 가져오길 원합니다. 예: </p>
<pre class="brush:js;toolbar:false;"><템플릿>
<div :class="$style['color-text']">Asd</div>
</템플릿>
<스크립트 lang="ts" 설정>
const color = ref("기본")
</스크립트>
<style lang="scss" 모듈>
.color-text {
배경색: var(--v-theme-[[v-bind(color)]]);
}
</스타일>
</pre>
<p> [[v-bind(color)]]는 잘못된 구문입니다. 데모를 위해 방금 가져왔습니다. 색상이 JS에서 나오는 CSS에서 var(--v-theme-{color})를 사용할 수 있도록 색상 이름이나 색상 참조의 내용을 거기에 넣을 수 있기를 원합니다. 이 예에서는 var(--v-theme-primary)가 됩니다. <br /><br />아이디어가 있으신가요? 이 접근 방식이 가능합니까?
