「PrimeVue ライブラリを使用する場合、Vue3 の :deep() セレクターは無効です」

Question

vue3 と PrimeVue ライブラリを使用しています。 :deep() セレクターを使用して PrimeView コンポーネントの CSS フィールドをオーバーライドしようとしても、効果がありません。スコープ外のスタイルを使用する場合にのみ、変更が適用されます。なぜ機能しないのか混乱しています。

:deep() を使用したサンプル コード:

<テンプレート>
    <トースト位置='右下'/>
</テンプレート>

<スタイルスコープ>
:deep(.p-トーストメッセージアイコン) {
    マージン右: 10px !重要;
}
</スタイル>

これは機能しません。

ただし、スコープなしで style を使用する場合は、次のようになります。

<style>
.p-トーストメッセージ-アイコン {
    マージン右: 10px !重要;
}
</スタイル>

それはうまくいきます。

Answer 1

:deep セレクターを通じて生成されたルールは、現在のコンポーネントの子要素に対して有効になりますが、p-toast は 要素にアタッチされているため、生成されたクラスは効果がありません。

ただし、 パス オプション を設定して、アイコンにスタイル ルールを渡すことができます。

リーリー ＃＃＃または＃＃＃ リーリー

サンドボックス

の例を参照してください。