使用環境
・Windows
・VScode
・Node.js (v14.17.6）
・Nuxt
はじめに
Nuxtにてアプリ開発をする中で、子コンポーネントのstyleを親側で変更することに苦戦した経験があったので同じところで躓かれている方の参考になればと思い書きました。
結論
Vueでstyleを記述する際にscopedにしていると思いますが
この場合親側からは普通にseleterを選んでもstyleが効きません。
deep selectorというものが必要になります。
やりたかったこと
子でv-btnを記述しボタンを用意。親側でボタンの背景色をピンクに変更したい場合どうするか？
●親
parent.vue
<template>
<v-app>
<btn />
</v-app>
</template>
<script>
import Btn from "~/components/btn.vue";
export default {
components: {
Btn,
},
};
</script>
●子
child.vue
<template>
<v-app>
<v-btn width="100px" height="40px" class="mt-10 mx-auto blue">
foo
</v-btn>
</v-app>
</template>
試行錯誤
最初はこれ
parent.vue
<template>
<v-app>
<btn style="background-color:pink;"/>
</v-app>
</template>
あれ、、違う。
じゃー、デベロッパーツールでボタンを選択して背景色をブルーに設定しているseleterをコピーしてstyleで変更しよう。
parent.vue
<template>
<v-app>
<btn />
</v-app>
</template>
<script>
import Btn from "~/components/btn.vue";
export default {
components: {
Btn,
},
};
</script>
<style lang="scss" scoped>
.v-application .blue{
background-color: pink;
}
</style>
これでもダメか、、、。
あ、!important付けてないからだ。これで解決でしょ！！
parent.vue
<style lang="scss" scoped>
.v-application .blue {
background-color: pink !important;
}
</style>
結果何にも変わりません。
頭を悩ませながらググっていたらdeep selectorなるものがあることを発見。
見よう見まねでコードを修正
parent.vue
<style lang="scss" scoped>
::v-deep .v-application .blue {
background-color: pink !important;
}
</style>
か、変わりました。
よかった。
最後に
scopedをなんとなくで使っていましたが今回の躓きで理解を深められたと思います。
また、deep selectorの書き方は何通りかあるみたいですが個人的には「::v-deep」
が一番いいかなと思いました。
あと、ちゃんと公式ドキュメントを読み込むことの重要性を実感しました。