[Vuejs]-Vue3 css :deep() selector not working with PrimeVue library

by

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

👤Moritz Ringler

Leave a comment