Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】
2024/06/12
※当ブログの記事にはアフィリエイトリンクを使用している場合があります。
目次
前提
スコープ付きCSSはファイル内の要素にだけ適用されるため、子コンポーネントにはCSSが適用されません。
Parent.vue
<script setup>
import { ref } from "vue";
import Child from "./Child.vue";
const msg = ref("Hello World!");
</script>
<template>
<div>
<p>親コンポーネント</p>
<div class="parent">
<Child></Child>
</div>
</div>
</template>
<style scoped>
.parent p {
<!-- 適用されない -- >
background-color: red;
}
</style>Child.vue
<template>
<div>
<p>子コンポーネント</p>
</div>
</template>解決方法
:deep() 擬似クラスを使用します。
Parent.vue
<style scoped>
.parent :deep(p) {
background-color: red;
}
</style>プレイグラウンド
以下のURLから動作を確認することができます。
補足
Vue2では>>>、/deep/、::v-deep()を使うことができました。
Parent.vue
<style scoped>
.parent >>> p {
background-color: red;
}
.parent /deep/ p {
background-color: red;
}
.parent ::v-deep(p) {
background-color: red;
}
</style>Vue3でも動作しますが、非推奨となっています。
