【Vue3 × CSS】動的なスタイル変更を実現するためのCSS Bindingの活用法

前提

• Vueプロジェクトが存在する

今回はNuxtプロジェクトに実装していきます。

以前までの方法

以前まではtemplate内でv-bindを使って、HTML上のstyle属性に適用させていました。
Vue3.2からもっと柔軟になります。

<style lang="sass">
.color-pallet
  h1
    background: var(--color-h1)
    font-size: 3rem
    margin: 80px 0
  h2
    background: var(--color-h2)
    font-size: 2rem
    margin: 50px 0
  h3
    background: var(--color-h3)
    font-size: 1.5rem
    margin: 40px 0
  p
    color: var(--color-back)
</style>

styleタグ内で変数をバインド

switchColorにより cool, cute を切り替え、CSS側で coolColor, cuteColorの各プロパティを出し分けます。

scriptタグで変数を定義

<script setup lang="ts">
type ColorType = {
  h1: string
  h2: string
  h3: string
  str: string
}

const coolColor: ColorType = {
  h1: '#08ffc8',
  h2: '#fff7f7',
  h3: '#dadada',
  str: '#204969'
}

const cuteColor: ColorType = {
  h1: '#ffb6b9',
  h2: '#fae3d9',
  h3: '#bbded6',
  str: '#8ac6d1'
}

const switchColor = ref<'cool' | 'cute'>('cool')
const richText = #h1,h2,h3,pタグが含まれたリッチテキストが入る
</script>

#h1,h2,h3,pタグが含まれたリッチテキストが入る

リッチテキストはコメントの内容に沿って入れます。

styleタグで動的にバインド

今回は SASS で実装しましたが、SCSS や CSS でも可能です。

<style lang="sass">
.color-pallet
  h1
    background: v-bind("switchColor === 'cool' ? coolColor.h1 : cuteColor.h1")
    font-size: 3rem
    margin: 80px 0
  h2
    background: v-bind("switchColor === 'cool' ? coolColor.h2 : cuteColor.h2")
    font-size: 2rem
    margin: 50px 0
  h3
    background: v-bind("switchColor === 'cool' ? coolColor.h3 : cuteColor.h3")
    font-size: 1.5rem
    margin: 40px 0
  p
    color: v-bind("switchColor === 'cool' ? coolColor.str : cuteColor.str")
</style>

今回は cool や cute などを切り替えてますが、直接変数や配列やオブジェクトを渡すを入れることも可能です。

DEMO

こちらに動作環境があります。
https://fir-study-42747.web.app/

【今回の作業ブランチ】
https://github.com/yutahhh/firebase-study/tree/feature/%238

お疲れ様でした。