deep セレクターを使用する
<style scoped>
:deep(.child) {
width: 1000px;
}
</style>
style scoped で定義したcssは当該ファイルの全てのタグにdata-v-xxxxxx属性が設定される。
子コンポーネントのルートノードは親のスコープ付き CSS と子のスコープ付き CSS の両方の影響を受ける
つまり子コンポーネントのトップレベルのタグには両方のdata-v-xxxxxx属性が設定される。
※なぜかルートノードなのに親タグの属性が付与されない場合がある。
その場合は更にルートとしてdiv等を追加してやると解決する。
レンダリング後のCS
- deepを使用しない場合（scopedなのでファイル内の要素が対象）
.child[data-v-2e51c661]
- deepを使用した場合
[data-v-2e51c661] .child
コンポーネント構成によるスタイルの適用パターン
Pages内のコンポーネントに使いたい場合、かつルートノードにスタイルを適用したい場合
.child,
:deep(.child) {
width: 1000px;
}
Pages内のvueファイルでdeepをつけても、
page内に置かれたタグ、コンポーネントのルートノードには適用されない。
cssクラスが設定されたタグの親に[data-v-2e51c661]の属性がつかないため。
コンポーネント内の子コンポーネントに使いたい場合
:deep(.child) {
width: 1000px;
}
コンポーネント内であればそのタグ、子コンポーネントのルートノードには適用される。
ルートノードにスタイルを適用しない場合（Pages内、コンポーネント内問わず）
:deep(.child) {
width: 1000px;
}
ルートノードに適用対象がなければdeepをつけておけば全て適用される