recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>J'utilise la bibliothèque vue3 et PrimeVue. Lorsque j'essaie de remplacer le champ CSS du composant PrimeView à l'aide du sélecteur <code>:deep()</code> Cela n'applique mes modifications que lorsque j'utilise des styles sans portée. Je ne comprends pas pourquoi cela ne fonctionne pas. </p> <p>Exemple de code avec <code>:deep()</code>: </p> <pre class="brush:js;toolbar:false;"><template> <Position du toast='buttom-right'/> </modèle> <portée du style> :deep(.p-toast-message-icône) { marge droite : 10px !important ; } </style> ≪/pré> <p>Cela ne fonctionne pas. </p> <p>Mais lorsque vous utilisez <code>style</code> sans portée, comme ceci : </p> <pre class="brush:js;toolbar:false;"><style> .p-toast-message-icône { marge droite : 10px !important ; } </style> ≪/pré> <p>Ça marche. </p>
P粉785522400P粉785522400461 Il y a quelques jours590

répondre à tous(1)je répondrai

  • P粉094351878

    P粉0943518782023-08-30 16:40:49

    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.

    répondre
    0
  • Annulerrépondre