I recently migrated my project from Angular 11 to Angular 18, updating all related packages, including Angular Material. After completing the migration, I encountered some issues that I need help resolving.

Context:

My project was initially built with Angular 11.
I upgraded to Angular 18, ensuring all dependencies, including Angular Material, were updated to the latest versions.
After the migration, I noticed several changes in the CSS styling and class names.
Issues:

CSS Styling: The overall appearance of my project has changed. Many of the styles that were previously applied are now either missing or altered.

Class Names: Angular Material has moved from using the mat- prefix to mdc- for certain components. For example, buttons that used to have mat-button classes are now using mdc-button, which has different styling and behavior.

My Questions:

Is there a way to retain the old mat- classes and styles from Angular 11 in Angular 18? I prefer not to adopt the mdc- prefix if possible.
If it’s not possible to retain the old classes, what would be the best approach to ensure that the UI remains consistent with its previous design?
Are there any specific steps or configurations I need to adjust to maintain the look and feel of my project post-migration?
Additional Details:

I’ve reviewed the official Angular Material documentation and migration guides, but I’m still unclear on how to maintain the old styles without significant rewrites.
I’ve attempted to override some of the new mdc- styles with custom CSS, but the results are inconsistent.
Environment:

Angular: 18
Angular Material: Latest version compatible with Angular 18

Any guidance, examples, or resources that could help resolve these issues would be greatly appreciated. Thank you in advance!

• What I Tried:

• Reviewing Documentation: I went through the official Angular Material documentation and the migration guides provided, looking for any options to retain the old mat- class names or styles. Unfortunately, I didn’t find any straightforward solutions.

• Custom CSS Overrides: I attempted to manually override the new mdc- styles by adding custom CSS to mimic the old mat- appearance. However, the results were inconsistent, and maintaining these overrides across the entire project seems impractical and error-prone.

• Exploring Compatibility Options: I searched for any backward compatibility features or flags in Angular or Angular Material that might allow me to continue using the mat- classes, but I couldn’t find anything that worked.

• What I Was Expecting:

• I was hoping to find a way to either:

• Retain the Old Styles and Classes: Continue using the mat- prefix classes without having to refactor the entire codebase to adopt the new mdc- classes.
  Simple Migration Path: A seamless migration path where the new classes (mdc-) would not drastically change the UI’s look and feel or require significant effort to maintain the previous design consistency.