Angular中无法修改Mat Slide Toggle切换按钮的颜色

兄弟，我太懂你这种改不了组件样式的抓狂感了！针对你遇到的Mat Slide Toggle颜色无法修改的问题，我帮你梳理几个常见原因和解决方案，应该能搞定！

首先要明确一个关键前提：Angular Material的版本会直接影响样式定制的方式，不同版本的类名、CSS变量都不一样，先确认你的版本——运行ng version命令，查看@angular/material的版本号，然后对应下面的方案来操作。

情况1：Angular Material版本 < 15（非MDC架构） #

你原来写的类名（.mat-slide-toggle-bar、.mat-slide-toggle-thumb）是对的，但大概率是样式作用域或者优先级的问题：

解决方案： #

1. 调整样式作用域：把你的定制样式移到全局的styles.css里（不需要加::ng-deep），因为全局样式的优先级更高，不会被组件的样式封装隔离。
   全局样式代码：

   /* 未选中状态 */
   .custom-toggle.mat-slide-toggle .mat-slide-toggle-bar {
     background-color: yellow !important;
   }
   .custom-toggle.mat-slide-toggle .mat-slide-toggle-thumb {
     background-color: yellow !important;
   }
   
   /* 选中状态 */
   .custom-toggle.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
     background-color: yellow !important;
   }
   .custom-toggle.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
     background-color: yellow !important;
   }
   

2. 如果要在组件内写样式：保留::ng-deep，但确保选择器足够具体，比如：

   ::ng-deep .custom-toggle.mat-slide-toggle .mat-slide-toggle-bar {
     background-color: yellow !important;
   }
   

情况2：Angular Material版本 >=15（MDC架构） #

这个版本的组件底层换成了MDC（Material Design Components），旧的类名已经失效了，得用新的方式：

方法A：用CSS变量（推荐，更简洁） #

直接通过CSS变量定制，不需要写复杂的选择器，变量可以穿透组件封装：

<mat-slide-toggle 
  class="custom-toggle"
  [checked]="isConnected" 
  (change)="toggleConnection($event)"
>
  Toggle Connection
</mat-slide-toggle>

对应的CSS（组件内或全局都可以）：

.custom-toggle {
  /* 未选中状态 */
  --mdc-switch-handle-color: yellow;
  --mdc-switch-inactive-track-color: yellow;
  /* 选中状态 */
  --mdc-switch-active-handle-color: yellow;
  --mdc-switch-active-track-color: yellow;
}

方法B：用新的类选择器 #

如果习惯用类选择器，需要用MDC的类名：

/* 未选中状态 */
.custom-toggle .mdc-switch__track {
  background-color: yellow !important;
}
.custom-toggle .mdc-switch__handle {
  background-color: yellow !important;
}

/* 选中状态 */
.custom-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track {
  background-color: yellow !important;
}
.custom-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle {
  background-color: yellow !important;
}

额外排查技巧 #

打开浏览器开发者工具（F12），选中你的Toggle按钮，查看元素的样式面板：

• 看看你写的定制样式有没有出现在面板里，如果没有，说明样式没被加载（检查路径、类名是否正确）；
• 如果出现了但被划掉了，说明优先级不够，要么加!important，要么把选择器写得更具体（比如加上父元素的类）。

备注：内容来源于stack exchange，提问作者RedUmbrella