CODEWITHSUNDEEP
angularangular-materialangular-material2
Carlos Isidoro López
Carlos Isidoro López

Reputation: 493

Upgrading styles in Angular Material 15 is a mess

We am currently upgrading Angular Material from 14 to 15 in our Angular 15 project. I have been following the upgrade guide to use the new MDC-based components, because our project is growing at a fast pace and we do not want to rely on the Legacy versions much longer.

What we are facing now is a whole lot of errors in styling. Our code had many references to material classes that have now been either renamed or completely rewritten, making it a real mess to migrate them.

This made us reconsider our trust in the Angular Material project, as we cannot afford these kind of big breaking updates. We also wonder what could we have done to prevent this impact.

We see that Angular Material is now offering CSS custom properties to override some of their styles, yet I have not found a consistent guide of all this new variables. I hope this is a more robust or trustworthy way of overriding styles that referring to mat-* or mat-mdc-* classes. If not, as of Angular Material 15, what do you consider the best way to override material styles?

Upvotes: 9

Views: 4679

Answers (1)

Lincoln Alves
Lincoln Alves

Reputation: 654

This was indeed a heavy breaking change. But to be fair, it's been a long time coming...I believe they started working on the MDC Web alignment when version 8 was launched.

One approach you could take to at least divide the refactoring load is using the old components, which are still available on the @angular/material/legacy-* entry-points. Then you can start migrating components to the new versions one by one, giving you time and a single focus to properly test for unintended side-effects!

As for your other question: the new theming API (they are calling it the Token API, since it's a "coded" representation of Material's Design Tokens - at least I believe that's the reason), which uses CSS custom properties, is in development at the moment.

I've been checking their commits frequently, since I'm facing a similar challenge at my job...it seems like they plan on release the API on version 16.2.0, at least for some of their components.

I agree with the path they are taking. Custom properties will probably be the "go to" method for component styling customizations soon...it's already moving this way: I think primeNG is another of the big ones that plan to start working on it for Q3.

But while the API is not available, I think separating Material styles overrides (any third-party overrides, actually) in a well documented SCSS file and using custom classes to "flag" places where the overrides are being used if they are not global could be a good, easier to maintain/refactor approach.

Like, instead of using ::ng-deep in one of your component's specific SCSS file to target a in its template, you'd flag it with a custom class and on a separated SCSS file for your Material overrides you combine selectors to target mat-form-field's with that specific class, using SCSS nesting capabilities to target inner classes/elements of mat-form-field if necessary, and maybe documenting the reason there as well. This file could then be loaded on your global styles.scss file!

Sorry for the really long reply hahahah hope this helps! Cheers!

Upvotes: 7

Related Questions