【Vue3 × CSS】動的なスタイル変更を実現するためのCSS Bindingの活用法
Vue3の特長である動的CSS設定方法について解説します。styleタグ内で変数をバインドすることができるようになりました。
2023年05月31日
前提
- 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
お疲れ様でした。