I'm updating my Angular app to v15. I have a ton of predefined selectors for material components, using the former standard class names (mat-button).
Because the selectors change in v15 (mdc-button), I need to use the legacy material components (the migration automatically did this import update for me).
The issue is that the theme is not being applied when I'm using legacy components.
I've replicated the issue in a stackblitz: https://stackblitz.com/edit/f8rble-hjxjr7?file=src%2Fmaterial.module.ts.
If you switch the imports in src/material.module.ts from using legacy to using MDC (now it's the standard), you'll see the theme is applied for MDC components.
If it's importing the legacy module, the theme is not applied.
I thought the new MDC based components were opt-in, so I would think that themes would be applied to the legacy components. But for me, that's not the case.
If I don't use legacy, I have to update a ton of CSS selectors I have, and I really don't want to do that at this point, I want to be able to use the legacy components that apply the theme.
Also, my theme in my actual app is actually a custom theme, so please don't suggest adding a pre-built theme to my imports.
I posted this in other forums, and discovered what I was using to apply the material theme (@include mat.all-component-themes($theme);) did not apply to legacy components. To apply the theme to legacy components you need to use @include mat.all-legacy-component-themes($theme);.
all-legacy-component-themes doesn't apply the theme to non-legacy components, so if you want to have a theme for both legacy and non-legacy, then you need to use both all-component-themes and all-legacy-component-themes.
I've updated the stackblitz with the fix.