How can I add styles to elements inside p-dialog?

Question

I tried to add styles to elements inside the p-dialog element but looks like the styles don't get applied due to Angular's CSS encapsulation.

How can I add styles to the elements inside the p-dialog without changing my app's CSS encapsulation properties?

Edit -

<p-dialog [(visible)]="display" modal="modal" width="788" [responsive]="false">
    <p-header style="float:left">
        New Item
    </p-header> 

    <div style="float:left;">
    </div>
    ...
    ...


    <p-footer>
        <button type="button" (click)="display=false">Save</button>
        <button type="button" (click)="display=false">Cancel</button>
    </p-footer>
</p-dialog>

I want to apply styles to the Saveand Cancel buttons. and the content in the p-dialog.

Answer 1

Styling the <p-dialog>

One way of doing it is with inline styling the <p-dialog> tag using the brackets []:

<p-dialog [style]="{'color':'red'}"></p-dialog>

You can also style your p-dialog element by setting the styleClass attribute:

<p-dialog styleClass="myClass"></p-dialog>

With CSS you select it with its class name:

.myClass {
   color: red;
}

---

Styling child elements

You can style elements that are contained in the p-dialog tags like any other HTML elements: simply add a class attribute to the child element:

<p-dialog [(visible)]="display" modal="modal" width="788" [responsive]="false">
    <p-header class="dialogHeader">
        New Item
    </p-header>
</p-dialog>

and select it with the selector in CSS:

.dialogHeader {
  float: left;
}