How to style p-header of p-dialog i.e the whole header part?

user_13207153 0
Viewed 3476

I am trying to style the p-header of primeng dialog box p-dialog component and am stuck at styling it. I want the whole header element to be red but instead just my text is getting red. Here is my code snippet:

Here is the result I am getting:

Here is the result I am getting

This is the desired output:

This is the desired output

<p-dialog  [(visible)]="popup.visible">
  <p-header [ngStyle] = "{'background-color':'red'}">
    {{popup.header}}
  </p-header>
  {{popup.message}}
</p-dialog>

I have also tried styleClass, ngClass , [style] getting no luck also

 @Component({
    encapsulation: ViewEncapsulation.None
})

works but I don't want to disable viewEncapsulation.

primeng angular css html
2 Answers
:host ::ng-deep .p-dialog .p-dialog-header{
    background:red;
}
user_194633460

As long as you don't have this classes in template from Primeng components, you can't access them from a template-component.css

For this situation you need a global/theme css file that overrides the styles from PrimeNG.

Or you can use depricated selector ::ng-deep in component css file like this:

  :host ::ng-deep .ui-dialog .ui-dialog-titlebar {
      background-color: red;
  }
user_18449230
Related