"The :deep() selector in Vue3 is invalid when using the PrimeVue library"

Question

I am using vue3 and PrimeVue library. When I try to override the PrimeView component's css field using the :deep() selector, it has no effect. It only applies my changes when I use unscoped styles. I'm confused as to why it doesn't work.

Sample code with :deep():

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

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

This doesn't work.

But when using style without scope, like this:

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

That works.

Answer 1

The rules generated through the :deep selector will take effect for the child elements of the current component, but p-toast is attached to the element, so the generated class will have no effect.

However, you can set pass options to pass style rules to the icon:

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

or

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

See examples in Sandbox.