Angular 18 Material设计令牌无法覆盖主题问题求助

我在Angular 18.2.10中尝试使用设计令牌为滑动切换组件（Slide Toggle）覆盖Angular Material Azure主题样式，但部分样式无法生效。

文件夹结构 #

• 根目录styles.scss仅包含：@forward './assets/styles/main.scss';
• assets/styles目录下有main.scss和_variables.scss
  • main.scss内容：@forward './_variables';
  • 核心配置在_variables.scss中

_variables.scss代码 #

@use '@angular/material' as mat;

$white-0: #ffffff;
$grey-600: #72777e;
$grey-800: #3c4046;
$grey-1000: #15181b;

:root {
  @include mat.slide-toggle-overrides((
   unselected-track-color: $grey-800,
   unselected-icon-color: $grey-1000,
   unselected-pressed-track-color: $grey-800,
   unselected-hover-track-color: $grey-800,
   unselected-focus-track-color: $grey-800,
   unselected-handle-color: $grey-600,
   selected-icon-color: $grey-1000,
   selected-handle-color: $white-0,
   selected-focus-handle-color: $white-0,
   selected-track-color: $grey-800,
 ));
 }

控制台异常 #

请问如何确保我的样式能完全覆盖Azure Blue主题？

解决方法 #

1. 调整样式加载顺序
   Angular Material主题样式优先级高于自定义覆盖，需确保自定义样式在主题之后加载。修改根目录styles.scss：

   // 先引入Angular Material Azure主题
   @use '@angular/material/azure-blue' as azure-blue;
   @include azure-blue.core();
   @include azure-blue.all-component-themes();
   
   // 再引入自定义覆盖配置
   @forward './assets/styles/main.scss';
   

   同时检查angular.json的styles数组，确保自定义样式文件在预构建主题之后：

   "styles": [
     "@angular/material/prebuilt-themes/azure-blue.css",
     "src/styles.scss"
   ]
   

2. 补充缺失的设计令牌
   滑动切换组件存在部分未覆盖的状态令牌，比如选中态的悬浮、按压样式，补充这些令牌到mat.slide-toggle-overrides中：

   @include mat.slide-toggle-overrides((
     // 原有令牌保留
     unselected-track-color: $grey-800,
     unselected-icon-color: $grey-1000,
     unselected-pressed-track-color: $grey-800,
     unselected-hover-track-color: $grey-800,
     unselected-focus-track-color: $grey-800,
     unselected-handle-color: $grey-600,
     selected-icon-color: $grey-1000,
     selected-handle-color: $white-0,
     selected-focus-handle-color: $white-0,
     selected-track-color: $grey-800,
     // 补充缺失的状态令牌
     selected-hover-handle-color: $white-0,
     selected-pressed-handle-color: $white-0,
     selected-hover-track-color: $grey-800,
     selected-pressed-track-color: $grey-800,
   ));
   

3. 强制CSS变量覆盖（可选）
   若上述方法仍有样式未生效，可直接在:root中定义对应CSS变量，强制覆盖主题值：

   :root {
     --mdc-switch-unselected-handle-color: #72777e;
     --mdc-switch-unselected-track-color: #3c4046;
     --mdc-switch-selected-handle-color: #ffffff;
     --mdc-switch-selected-track-color: #3c4046;
     // 根据控制台中未生效的样式，补充对应CSS变量
   }
   

内容的提问来源于stack exchange，提问作者user p