How to override styles of an overlay (.ui-widget-overlay) generated by PrimeNG outside the...

I need to apply specific opacity and background color to a p-sidebar component from PrimeNG. I can achieve this globally by adding the following to styles.scss:

body .ui-widget-overlay {
opacity: 0.5 !important;
background-color: #333 !important;
}


However, this approach affects every p-sidebar in the application, which is not what I want. I need to apply these styles only to a specific component.

I’ve already tried several approaches, such as:

Using ::ng-deep to target the overlay.

Using :host to scope the styles to the component.

Applying IDs and classes to the p-sidebar.

The issue seems to be that whenever I open the p-sidebar, a new div with the class .ui-widget-overlay is rendered at the body level, outside my component's DOM. This makes it impossible for the component to directly control or style this overlay.



Should I just create a custom component specifically for this, or is there a solution?

Continue reading...