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;
}

Vue 3 (および Vue 2.7)

Vue 3 では、:: v- プレフィックスは非推奨になりました。代わりに、統合された :deep セレクターを使用しますが、推奨される構文はセレクターをかっこで囲むことです:

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

この解決策は、Vue 2 の最終リリースである Vue 2.7 にも適用できます。 .

Vue の追加セレクター3

1. :slotted(.slot-class): を介して渡されたコンテンツをターゲットとします。
2. :global(. my-class): スコープ指定された要素からでも、特定の要素にグローバルに適用されます。

すべてのセレクターは 内で使用する必要があります。

追加の考慮事項

• /deep/ 構文は、すべてのバージョンで非推奨です。
• ::v-prefix は Vue 3 では非推奨になり、
• >>>構文は V​​ue 3 以降では非推奨になりました。

これらのスタイル設定テクニックを適用すると、Vue.js アプリケーションの子コンポーネント内の要素の外観を効果的にターゲットにしてカスタマイズできます。

以上がCSS セレクターを使用して Vue.js で子コンポーネントのスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。