"Le sélecteur :deep() dans Vue3 n'est pas valide lors de l'utilisation de la bibliothèque PrimeVue"

Question

J'utilise la bibliothèque vue3 et PrimeVue. Lorsque j'essaie de remplacer le champ CSS du composant PrimeView à l'aide du sélecteur :deep() Cela n'applique mes modifications que lorsque j'utilise des styles sans portée. Je ne comprends pas pourquoi cela ne fonctionne pas.

Exemple de code avec :deep():

Answer 1

via :deep选择器生成的规则会针对当前组件的子元素生效，但是p-toast est attaché à l'élément

, donc la classe générée n'aura aucun effet.

Cependant, vous pouvez définir des options de passage pour transmettre les règles de style à l'icône :

<Toast
    :pt="{
        icon: { style: 'marginRight: 10px !important;' }
    }"
/>

ou

<Toast
    :pt="{
        icon: { class: 'mr-2' }
    }"
/>

Voir des exemples dans Sandbox.