VueJS で JS 定義の名前を CSS 変数として使用するためのソリューション。

Question

<p>各テーマカラーの CSS 変数 (--v-theme-primary など) を作成する Vuetify を使用しています。 CSS で色を --v-theme-{something} に設定し、{something} の値を JS から取得できるようにしたいと考えています。例: </p> <pre class="brush:js;toolbar:false;"><テンプレート> <div :class="$style['coloured-text']">Asd</div> </テンプレート> <script lang="ts" セットアップ> const color = ref("プライマリ") </スクリプト> <style lang="scss" モジュール> .coloured-text { 背景色: var(--v-theme-[[v-bind(color)]]); } </スタイル> </pre> <p> [[v-bind(color)]] は無効な構文です。デモンストレーションのために取り上げただけです。カラーがJSから取得されるCSSでvar(--v-theme-{color})を使用できるように、そこにカラーリファレンスからのカラー名または何かを配置できるようにしたいと考えています。この例では、var(--v-theme-primary) になります。 <br /><br />何かアイデアはありますか？このアプローチは実現可能でしょうか? </p>

Answer 1

CSS 値の計算プロパティを作成できます。

:class="$style['coloured-text']" を削除して、class="coloured-text" を直接使用することもできます。

リーリー

sfc の例