将 css 样式应用于我的 angular 应用程序中的所有primeng 对话框

Question

I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:

contact.html
contact.component.ts
contact.css

So I place the below css in contact.css and it changes the contact us dialog title bar color.

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

I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.

Answer 1

So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.

You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.

However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.

Hope this helps, cheers!