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

Vue.js の子コンポーネントへのスタイルの適用: /deep/、>>>、および ::v-deep

Vue.js では、ディープ セレクターを使用して、子コンポーネント内の要素のスタイルを設定できます。ただし、スタイル ルールで /deep/、>>>、または ::v-deep 演算子を使用しようとすると、期待どおりに動作しない可能性があります。これらの演算子を正しく使用する方法についてのガイドは次のとおりです。

Vue 2.0 - 2.6

• Sass:

  セレクターの前で ::v-deep を使用して、内部の要素にスタイルを適用します子コンポーネント。

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

• Sass なし:

  使用 >>>セレクターの前に追加すると、同じ効果が得られます。

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

Vue 3 (および Vue 2.7)

• 統合構文:

  :deep() をセレクターとして使用し、ターゲット要素セレクターを括弧で囲みます。この構文は Sass の有無に関係なく機能します。

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

• 非推奨の構文:

  ::v-deep プレフィックスは Vue で非推奨になりました。 3. >>>演算子も廃止されました。

Vue 3 新しいセレクター

• スロット コンテンツ:

  :slotted() を使用して、渡されるコンテンツのスタイルを設定しますスロット。

  :slotted(.slot-class) {
    background-color: #000;
  }

• グローバル スタイル:

  スコープ コンポーネントからグローバル スタイルを登録するには、:global() を使用します。

  :global(.my-class) {
    background-color: #000;
  }

スコープ要件

Vue のすべてのバージョンでは、