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?

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?

• javascript
• html
• css
• angular
• primeng

2 Answers 2

Use the property styleClass to add a class to the sidebar.

<p-sidebar
    [(visible)]="sidebarVisible"
    styleClass="custom-sidebar"
    appendTo="body"
>
    <h3>Sidebar</h3>

Then we can use the Next-sibling combinator - + to select the adjacent next sibling and style it.

.custom-sidebar + .p-component-overlay {
  opacity: 0.5 !important;
  background-color: #333 !important;
}

If you want to define this at the component level, you can either use ::ng-deep (Not recommended by angular community)

"The Angular team strongly discourages new use of ::ng-deep. These APIs remain exclusively for backwards compatibility." Styling - ng-deep docs - codeandcloud

Related answer for ng-deep

    ::ng-deep .custom-sidebar + .p-component-overlay {
        opacity: 0.5 !important;
        background-color: #333 !important;
    }

Or use encapsulation: ViewEncapsulation.None to allow the CSS to be applied at the component level and be visible to all components.

@Component({
    selector: 'sidebar-basic-demo',
    templateUrl: './sidebar-basic-demo.html',
    standalone: true,
    imports: [ImportsModule],
    encapsulation: ViewEncapsulation.None,
    styles: [
        `
            .custom-sidebar + .p-component-overlay {
                opacity: 0.5 !important;
                background-color: #333 !important;
            }
        `,
    ],
})

Stackblitz Demo

• 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";