PrimeNG styling/theming

Question

Looking for some advice on how to change the styling/theming for the background of the primeNG panel component.

I tried to overwrite using the names below in my scss file for the component. However that did not work. Inline I tried

<p-panel header="Test" [style]="{'background': '#20A8D8 '}" [toggleable]="true">

It just changed the background of the component, not the title header. Wondering if anyone has stlyed/skinned any of the components and can help explain to me how to do it.

These are available for the Panel - just not sure how to access/overwrite them:

ui-panel Container element. ui-panel-titlebar Header section. ui-panel-title Title text of panel. ui-panel-titlebar-toggler Toggle icon. ui-panel-content Content of panel.

Thanks

Answer 1

Override PrimeNG components' styles with styleClass property and you have to put your style in the root styles.css or styles.scss (if you're using SCSS).

My style overrides PrimeNG Panel Footer style:

.editClientPanel .ui-panel-footer {
background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%);

}

Hope it helps or if you're way past the issue, hope you learned something you didn't.

Answer 2

I used :host::ng-deep before my style class to overwrite primeng styles.

:host::ng-deep .styleClassName{ background-color:#005DAA; }

Answer 3

It's simple, use them as classes in your css file like the following:

.ui-panel-title { // Your css code for Title text of the panel. }

Hope it helped