-1

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.

André
  • 1,602
  • 2
  • 12
  • 26
thirumurugan
  • 1
  • 1
  • Are the styles overriding the material components part of the same project? Have you checked for ToDo's added by the migration tool, like mentioned in the migration guide? – JSON Derulo Feb 16 '23 at 09:55
  • 1
    Are you sure the overriden style have the correct selector ? With `v15` Angular migrated the components to MDC-web which changes the underlying classes used by the components. – Matthieu Riegler Feb 16 '23 at 09:55
  • yes, the components are of the same project. for example : the text height was 20px earlier, but now it is 24px , but font size is 14px and line height is 20px before and after migration. couldnt find which style is overriding and causing the changes – thirumurugan Feb 16 '23 at 11:53
  • the overridden styles are now newly added as part of angular 15 migration. For example : for using a background color of a select element, we need to provide styles in .mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-flex , but now it is not working and .mdc-text-field--filled:not(.mdc-text-field--disabled) is not overriding the styles. Like this, need details on what classes have been removed and replaced with what classes, if we could find a list or tabular data for each element, we can manually validate the css overrides for each material elements – thirumurugan Feb 16 '23 at 12:08
  • Can you share your css? – robbieAreBest Feb 18 '23 at 02:31
  • I have the same problem STARTING FROM SCRATCH. THe styles are not applied to the material forms – Brian Reinhold Apr 21 '23 at 15:03

1 Answers1

0

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".

André
  • 1,602
  • 2
  • 12
  • 26