"使用PrimeVue库时，Vue3中的:deep()选择器无效"

Question

我正在使用vue3和PrimeVue库。当我尝试使用:deep()选择器覆盖PrimeView组件的css字段时，它没有任何效果。只有当我使用非作用域样式时，它才会应用我的更改。我对为什么它不起作用感到困惑。

带有:deep()的示例代码：

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

<style scoped>
:deep(.p-toast-message-icon) {
    margin-right: 10px !important;
}
</style>

这样不起作用。

但是当使用没有作用域的style时，就像这样：

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

这样就起作用了。

Answer 1

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

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

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

或者

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

在Sandbox中查看示例。