更改 Angular 中切换按钮的颜色

Question

我无法更改 Angular 中切换按钮的颜色。

这是我的代码：

 <mat-slide-toggle class="custom-toggle">
      Toggle
 </mat-slide-toggle>

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

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

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

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

我也尝试过这个：

<mat-slide-toggle
  style="--mat-slide-toggle-thumb-color: yellow; --mat-slide-toggle-bar-color: yellow;"
  class="custom-toggle"
  [checked]="isConnected"
  (change)="toggleConnection($event)"
>
  Toggle Connection
</mat-slide-toggle>

似乎没有什么作用...

也许我应该提到，这是我们在全局 styles.css 中使用的

@import '@angular/material/prebuilt-themes/indigo-pink.css';

任何帮助将不胜感激

我尝试咨询 chat-GPT 并阅读人们在此网站上提出的类似问题。

这在我的项目中不可用：@import '~@angular/material/theming';，我被告知我应该找到没有它的解决方案......

Answer 1

Angular Material 的预构建主题（例如 indigo-pink.css）通常会覆盖自定义样式。这些样式是封装的，这意味着您的样式并不总是按预期应用。

要有效地设计 Angular Material 组件（例如 mat-slide-toggle）的样式，您需要使用 Angular 的主题系统或深层 CSS 选择器。首先定义自定义主题，在其中指定主要元素的颜色。这将确保一致性并防止其他样式覆盖您的自定义颜色。此外，使用 ::ng-deep 选择器可以帮助您在 Angular Material 的封装组件中应用样式，从而允许您的自定义背景颜色直接在切换按钮的拇指和栏上生效。

如果您更喜欢内联样式，另一种方法是全局设置 CSS 变量，然后在组件样式中引用这些变量。