Primeng: The problem of 6.1.0 Toast CSS

[lwenhaoCN]

The angular 6.1.3 CSS style cannot be displayed properly.

[cagataycivici]

This is not a valid issue ticket as a stackblitz template is missing to demonstrate the issue which is vital for us to provide assistance to your case.

Please follow the issue guideline before creating new issues. If the issue still persists with the new version please create a new issue with our stackblitz template.

[gasparbarancelli]

Note that in the example using the bootstrap thema the Toast component has no style.
https://stackblitz.com/edit/angular-template-rqzyrm?file=app%2Fapp.component.html

See for yourself the new-colored thema file, it has for example the "body .ui-toast .ui-toast-message.ui-toast-message-info" classes, since the bootstrap thema does not.

Below is the link of themas.

https://github.com/primefaces/primeng/blob/master/src/assets/components/themes/nova-colored/theme.css

https://github.com/primefaces/primeng/blob/master/src/assets/components/themes/bootstrap/theme.css

@cagataycivici

[lwenhaoCN]

Sorry, this is my first feedback. I don't know how to respond.

It is normal to use stackblitz. But I tested it locally, and when I used version 6.1.0, the color didn't show up properly. I didn't change anything. It was normal when I changed to version 6.0.2.

This is the same way I used it locally:
https://stackblitz.com/edit/angular-wtltgd?file=src%2Fstyles.css

[cagataycivici]

This bootstrap theme is not maintained anymore along with other older free themes. Nova and Premium themes have the official support. Note that official bootstrap theme of PrimeNG is Avalon.

[zatura33]

Heres a css template you might use to solve --> the new p-toast(transparent bg)
::ng-deep .ui-toast-message-warn{ background: rgb(235, 235, 145); } ::ng-deep .ui-toast-message-error{ background: rgb(235, 145, 145); } ::ng-deep .ui-toast-message-success{ background: rgb(156, 235, 145); } ::ng-deep .ui-toast-message-info{ background: rgb(145, 199, 235); }