vue3 css：deep()selector不支持PrimeVue库

8xiog9wr 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(207)

我正在使用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>

这确实管用

vue.js

来源：https://stackoverflow.com/questions/76209962/vue3-css-deep-selector-not-working-with-primevue-library

1条答案

按热度按时间

mklgxw1f1#

:deep选择器生成的规则以当前组件的子对象为目标，但p-toast附加到主体，因此生成的类将不起作用。
但是，您可以设置传递选项以将样式规则传递给图标：

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

或

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

这里是Sandbox

赞(0）回复(0）举报 2023-05-18

我来回答

vue3 css：deep()selector不支持PrimeVue库

1条答案

相关问题

热门标签

最新问答