5

I'm working on an Angular project, updated from angular14 to 15, but after I install the new Material package the whole project seems visually broken. Wrong colors, margins, paddings. The project only contains css style files, not scss. I think the problem will be with the legacy material components, but how/where should I add to the project? Thanks!

bugesz
  • 75
  • 1
  • 7
  • Ok, I think I figured out, just have to put that line in the style.css: ../node_modules/@angular/material/legacy-prebuilt-themes/*find your not legacy package* – bugesz Feb 01 '23 at 15:25

3 Answers3

6

As it is detailed in the official documentation, you need to update the material version with this command.

ng generate @angular/material:mdc-migration

Note that this update will potentially break the logic of your application, as it introduce breaking changes.

But it will provide your application with all the new angular styles.

I assume that you have already run ng update @angular/material@15

A.Casanova
  • 555
  • 4
  • 16
5

Change css file to legacy in styles(angular.json)

F.e

from "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",

to "./node_modules/@angular/material/legacy-prebuilt-themes/legacy-pink-bluegrey.css",

tczkqq
  • 66
  • 3
4

The solution for me was to include the legacy theme and core provided by material theming.

Additionally to core include legacy-core:

@include mat.core();
@include mat.legacy-core();

and additionally to all-component-themes include all-legacy-component-themes:

@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);

I updated with nx migrate and nx did not automatically migrate, but refactored all Material Components to Legacy. This messed up all styling completely without the themes and core included correctly.

lajuma
  • 406
  • 5
  • 9