Apply styles in a PrimeNG dialog

Question

I'm having troubles trying to apply styles in a PrimeNG dialog.

I have a component which have a PrimeNG dialog:

<p-dialog header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal">
...
</p-dialog>

I also have a scss file where I have the styles of the component. The background-color of the dialog is transparent but I want to set it to white. So I've tried to apply the style in different ways in my scss file:

.ui-dialog {
    background-color: #fff;
}

Adding styleClass to the dialog and trying to apply styles to it:

<p-dialog styleClass="dialog-filters" header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal">

.dialog-filters {
    background-color: #fff;
}

None of them works. Any idea?

Answer 1

For a style argument you should use use []. So when you want to apply inline-style to p-dialog that would be for example <p-dialog [style]="{'margin-left':'80px', 'margin-right':'80px'}"></p-dialog>.

I must admit I very confused myself when primeng requires [], nothing or [()], at least when looking at their website, which is not frequently updated. So you better just take a look into their source code on github.

Answer 2

use the following css method

:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
    background: tomato; 
}