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

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?

• First, select the element by using DOM methods such as document.querySelector(). The selected element has the style property that allows you to set the various styles to the element.

• Then, set the values of the properties of the style object.

const curSidebar = document.querySelector('.ui-widget-overlay');

curSidebar.style.cssText += "opacity:0.5!important;background-color:#333!important";