MatButton loses color styling after upgrading to Angular Material v17 theming API
0 reputation · 19 Apr 2021, 21:32 UTC
Goal
After migrating an application to Angular Material v17, I want all mat-raised-button and mat-button instances with [color]="primary" or [color]="accent" to render with the correct palette colors again, both in the browser and in a server-side rendered (SSR) build.
Constraints and uncertainty
As I understand the v17 theming changes, button colors are no longer applied implicitly; the theme configuration is expected to include a mat-button-theme (or equivalent component theme) block, and omitting it leaves buttons without palette styling. My project also defines multiple button themes in different scopes, and the color input now appears to merge with the global theme, so inheritance between nested themes is unclear to me.
In the SSR build, theme styles seem to be injected after component initialization, which I suspect could cause a flash of unstyled buttons, but I have not confirmed whether the new API changes that timing.
Questions
- In v17, what is the minimal theme configuration required so that
[color]on MatButton resolves against the intended palette when more than one button theme exists in the stylesheet? - How does the color input interact with scoped
mat-button-themedefinitions versus the global theme—does the nearest scope win, or do they merge? - For SSR, is there a documented way to ensure the new theme styles are present before first paint to avoid unstyled buttons?