Vue deep Selectorでscoped SASSの子コンポーネントにスタイルを適用する方法

vueのscopedスタイルって便利ですよね。

思わぬところにスタイルが適用されるのを防げるし。

ただ、子コンポーネントの一部に対してスタイルを適用したい場合とかよくあると思います。

外部モジュールのコンポーネントのスタイルをオーバーライドしたいとか。

そんなときはdeep selectorを使用することで解決できます。

deep Selector

/deep/ >>> でセレクタを設定すると、子コンポーネントに適用することができます。

機能しない例

// outer.vue

<template>
    <div class="outer">
        <p class="outer-text">Outer Text</p>
        <Inner />
    </div>
</template>

<style lang="scss" scoped>
.outer-text {
    color: red;
}

.inner-text {
    color: blue;
}
</style>

// inner.vue

<template>
    <div class="inner">
        <p class="inner-text">Inner Text</p>
    </div>
</template>

<style lang="scss" scoped>
.inner-text {
    color: green;
}
</style>

これの場合は、Inner Text は緑色になります。

outer.vue に記載している .inner-text { color: blue; } が適用されていないからですね。

※ちなみにトップレベルは適用されるため、 outer.vue に .inner { color: blue; } と記載すればこれは適用されます。限定的ですけどね……

機能する例

// outer.vue（中略）

// エイリアスなのでどちらでもいい
/deep/ .inner-text {
    color: blue;
}

>>> .inner-text {
    color: blue;
}

こうすることで子コンポーネントのトップレベル以外にもスタイルを適用することが可能です。

vue3の場合

// outer.vue（中略）

:deep(.inner-text) {
    color: blue;
}

vue3の場合、 /deep/ >>> は廃止され、 :deep(.selector) に変更されたようです。

Nuxt3で試したところ、 /deep/ はコンパイルエラー、 >>> はwarnでした。

基本的にはコンポーネント内で収まる設計がきれいだとは思いますが、どうしても子コンポーネントにスタイルを適用したい場合でも手段が用意されているのはありがたいですね。