Angular Material 19.2主题引入时如何避免样式重复？

问题根源 #

你遇到的重复生成警告，是因为每个组件的@include mat.xxx-theme()语句内部默认会包含基础核心样式、排版、密度样式。如果在明暗主题中分别对多个组件单独调用theme include，就会重复生成这些基础样式，触发警告。

正确实现步骤 #

1. 全局统一引入基础样式
   在styles.scss开头只引入一次核心、排版、密度基础样式，避免重复加载：

   @use '@angular/material' as mat;
   @use './_theme-colors' as colors; // 引入生成的主题色变量文件
   
   // 仅全局执行一次，不要在组件theme块内重复调用
   @include mat.core();
   @include mat.core-typography(mat.define-typography-config());
   @include mat.density();
   

2. 定义明暗主题变量
   基于生成的主题色，统一定义全局主题变量：

   // 浅色主题
   $light-theme: mat.define-light-theme((
     color: (
       primary: colors.$primary,
       accent: colors.$accent,
       warn: colors.$warn
     ),
     typography: mat.define-typography-config(),
     density: 0
   ));
   
   // 深色主题
   $dark-theme: mat.define-dark-theme((
     color: (
       primary: colors.$primary,
       accent: colors.$accent,
       warn: colors.$warn
     ),
     typography: mat.define-typography-config(),
     density: 0
   ));
   

3. 统一应用组件主题
   推荐使用mat.all-component-themes()一次性为所有组件应用主题，避免逐个组件调用导致的重复：

   // 浅色主题样式（绑定到类名，用于主题切换）
   .light-theme {
     @include mat.all-component-themes($light-theme);
   }
   
   // 深色主题样式
   .dark-theme {
     @include mat.all-component-themes($dark-theme);
   }
   

   如果只需按需引入部分组件主题，确保不在每个组件theme块内重复引入基础样式：

   .light-theme {
     @include mat.button-theme($light-theme);
     @include mat.card-theme($light-theme);
     // 按需添加其他组件theme即可，无需重复引入core/typography
   }
   
   .dark-theme {
     @include mat.button-theme($dark-theme);
     @include mat.card-theme($dark-theme);
   }
   

4. 设置默认主题
   如果需要默认主题，可直接给全局元素绑定主题类：

   body {
     @include mat.all-component-themes($light-theme);
   }
   
   // 切换深色主题时，给body添加dark-theme类即可
   body.dark-theme {
     @include mat.all-component-themes($dark-theme);
   }
   

关键注意事项 #

• 不要在组件的@include mat.xxx-theme()语句之外或内部重复调用mat.core()、mat.core-typography()、mat.density()
• 优先使用mat.all-component-themes()减少重复代码，同时避免重复样式生成
• 确保_theme-colors.scss只通过@use引入一次，不要重复导入

内容的提问来源于stack exchange，提问作者Phil Jollans