Angular 15 Material legacy components missing style

Question

After upgrading my app from Angular 14 to 15 and adapted my Material components to the legacy ones, I have some style issues on some components. My mat-autocomplete and mat-select have imcomplete css on their mat-autocomplete-panel and mat-select-panel. Main issue is the missing background-color, making the containers look transparent, but also focus and hover on options as well.

I've tried @include mat.legacy-core(); but without avail.

Answer 1

I had a similar issue (mat-slider was completely invisible). The issue was due to the fact that I had deleted the legacy material theme imports.

In my styles.scss, I had the new import:

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

But I was missing the legacy one:

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

Depending on your use case you might also need:

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