英文:
Angular Material v15 Update - Theme Not Applied to Legacy Buttons
问题
我正在将我的Angular应用程序升级到v15。我有大量预定义的材料组件选择器，使用以前的标准类名（mat-button）。
由于在v15中选择器发生了变化（mdc-button），我需要使用传统的材料组件（迁移自动为我更新了此导入）。
问题是当我使用传统组件时，主题未被应用。
我在stackblitz中复制了这个问题：https://stackblitz.com/edit/f8rble-hjxjr7?file=src%2Fmaterial.module.ts。<br>
如果您在src/material.module.ts中切换导入，从使用传统切换到使用MDC（现在是标准），您将看到主题适用于MDC组件。<br>
如果导入的是传统模块，主题将不会应用。
我认为新的基于MDC的组件是可选的，所以我认为主题会应用于传统组件。但对我来说，情况并非如此。
如果我不使用传统方式，我必须更新大量的CSS选择器，而我现在真的不想这样做，我想要能够使用应用主题的传统组件。
此外，我的实际应用程序中的主题实际上是自定义主题，所以请不要建议将预构建主题添加到我的导入中。
英文:
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. <br>
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.<br>
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.
答案1
得分: 0
我在其他论坛上发布了这个问题，并发现我用来应用 Material 主题的代码（@include mat.all-component-themes($theme);）不适用于传统组件。要将主题应用于传统组件，您需要使用 @include mat.all-legacy-component-themes($theme);。
all-legacy-component-themes 不会将主题应用于非传统组件，因此如果您希望为传统和非传统组件都使用主题，那么您需要同时使用 all-component-themes 和 all-legacy-component-themes。
我已经在 StackBlitz 中更新了修复。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论