Why are my style overrides not working anymore after migrating Angular Material from version 14 to 15?

Question

The material UI elements utilized in Angular 14 styles are overridden in angular 15 material, and themes are not working. Is there any blog or docs that can be referred to follow the steps for a smoother migration.

Styles overridden in material components like input, select, autocomplete, text font etc.

I tried following the official angular migration guide and I executed the ng generate @angular/material:mdc-migration command to migrate the angular material components. The items are migrated as expected, but after migration the existing manual styles are overridden by the default material styles.

Answer 1

Would be nice to see some examples to be certain.

This is very likely due to the fact that angular material changed most class names from v14 to v15.
For example: .mat-form-field mentioned in the comments would become .mat-mdc-form-field in v15.
An initial step would be to search globally for all ".mat-" occurences in your codebase and change to ".mat-mdc". This will solve most, if not all overrides. However, be aware of exceptions such as ".mat-icon".

Answer 2

It seems that the problem is a difference one. The Material Components are not overwriteable with the styles.scss. Even if i overwrite the Border Attribute, it will not be applied to the Element. BorderBottom is still 0

Have a look: not overwriting css in MDC Compontents