Topic: MDB PRO - Custom Theme - Toast Styles Import Order Breaks toast type color styles
HanoRossouw free asked 1 month ago
*_Expected behavior_*Import base styles (free and pro), add custom theme on top, expect toasts to have correct colors when using warning, danger success etc
*_Actual behavior_*Theme styles are imported after core styles and overrides core .toast css class with new background color which overrides background color from .toast-warning or any of the other types.
Suggested fix would be to also add the warning, success, light, dark, danger, primary, info, secondary classes to the pro theme import so as that it is the last css style which affects the toast component then the colors should display as intended, or that for the types of toasts the color should be forced with important.
Or advice of what to do in this use case scenario?
Resources (screenshots, code snippets etc.)
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 3.0.0
- Device: Desktop Dell laptop
- Browser: Google Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 1 month ago
It looks like something we will need to fix on our end. I added that to our to-do list.
As a workaround for now you would need to create new CSS rules to override the colors and set original values.
HanoRossouw free commented 1 month ago
Hi Yes, that is the only temporary measure I can take is just to copy the core toast-warning, danger, primary etc classes into my theme styles to just reapply them so they get loaded last then hopefully that can work as a workaround or override for now