„Der :deep()-Selektor in Vue3 ist ungültig, wenn die PrimeVue-Bibliothek verwendet wird.“

Question

Ich verwende vue3 und die PrimeVue-Bibliothek. Wenn ich versuche, das CSS-Feld der PrimeView-Komponente mit dem Selektor :deep() zu überschreiben, hat dies keine Auswirkung. Meine Änderungen werden nur angewendet, wenn ich Stile ohne Bereichseinschränkung verwende. Ich bin verwirrt, warum es nicht funktioniert.

Beispielcode mit :deep():

<template>
    <Toast position='buttom-right'/>
</template>

<Stilbereich>
:deep(.p-toast-message-icon) {
    Rand rechts: 10px !important;
}
</style>

Das funktioniert nicht.

Aber bei Verwendung von style ohne Gültigkeitsbereich:

<style>
.p-toast-message-icon {
    Rand rechts: 10px !important;
}
</style>

Das funktioniert.

Answer 1

通过:deep选择器生成的规则会针对当前组件的子元素生效，但是p-toast是附加到元素上的，所以生成的类将没有效果。

然而，您可以设置传递选项将样式规则传递给图标：

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

或者

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

在Sandbox中查看示例。