我正在使用vue3和PrimeVue库。当我尝试使用:deep()选择器覆盖PrimeView组件的css字段时，它没有任何效果。只有当我使用非作用域样式时，它才会应用我的更改。我对为什么它不起作用感到困惑。
带有:deep()的示例代码：
1
1274<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>
这样就起作用了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
通过
元素上的，所以生成的类将没有效果。:deep选择器生成的规则会针对当前组件的子元素生效，但是p-toast是附加到然而，您可以设置传递选项将样式规则传递给图标：
<Toast :pt="{ icon: { style: 'marginRight: 10px !important;' } }" />或者
<Toast :pt="{ icon: { class: 'mr-2' } }" />在Sandbox中查看示例。