vue3 css :deep() selector not working with PrimeVue library

Question

I an working with vue3 and PrimeVue library. When I try to override css fields of PrimeView components using :deep() selector it just does not have any effect. only when I am using an unscoped style it applies my changes. I have trouble understanding why it does not work.

code for example 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 scoped like so:

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

This does work.

Moritz Ringler · Accepted Answer · 2023-05-10 08:25:20Z

1

The rules generated by a :deep selector target children of the current component, but the p-toast is attached to the body, so the generated class will have no effect.

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

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

or

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

Here it is in a Sandbox

edited May 10, 2023 at 8:25

answered May 9, 2023 at 14:00

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Noy Gafni Over a year ago

Thank you I will try this. Although the Toast component was just one example, I also encountered this problem in almost every primevue component, do you know if there is a general solution? or I need to find a solution for each component?

Moritz Ringler Over a year ago

Hmmm, the problem with the :deep() selector only affects components that are attached outside the current component. With other components, :deep() should work, as suggested by the documentation. Hard to say why it is not working without looking at it.

Noy Gafni Over a year ago

For some reason your answer still didn’t work, what could prevent it from applying the class even though I am using pass through?

Moritz Ringler Over a year ago

Hmm, not sure, I have added a link to a Sandbox where you can see it working.

Noy Gafni Over a year ago

Thank you I will try to find my issue with it

|

Collectives™ on Stack Overflow

vue3 css :deep() selector not working with PrimeVue library

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related