skinny_jones skinny_jones - 1 month ago 18
CSS Question

PrimeNG - How to change p-growl style

I'm using version 4.0.1

p-growl messages have yellow background color and black font color even when the severity message is set to error.

How can I change the style of this component? The documentation doesn't seem to be up to date.
https://www.primefaces.org/primeng/#/growl

I tried to set my style on .ui-growl-message and .ui-growl-container but nothing happens, for example:

my-component.component.css

.ui-growl-message {
color: red;
}

Answer Source

You must likely add one of the following before the selector:

/deep/

>>>

before the selector. If you're using the CLI then use /deep/, if not. Use the other.

/deep/ .ui-growl-message {
    color: red;
}