CSS セレクターを使用して Vue.js で子コンポーネントのスタイルを設定する方法

/deep/、>>>、または ::v-deep を使用した Vue.js の子コンポーネントのスタイル設定

Vue.js のコンテキスト内、子コンポーネントの詳細なスタイル設定は、特定の CSS セレクターを使用して実現できます。ただし、実装中に問題が発生する可能性があります。

Vue 2.0 - 2.6

子コンポーネントを貫通してネストされた要素を選択するには、::v- のいずれかを使用できます。 deep (Sass を使用) または >>> (Sass なし) CSS ルールで次のように記述します:

Sass:

::v-deep .child-class {
    background-color: #000;
}

Other CSS:

>>> .child-class {
    background-color: #000;
}