如何在组件中覆盖mat-slide-toggle覆盖Css？

Question

我有一个组件，是Sample1.html.component，里面有mat slide toogle，我加了一个scss，但是没有生效，是不是因为angular material默认的原因？谢谢。

如果切换并选中它，它的颜色应该是#56ff00，就像下面的scss一样。

Angular toogle

<mat-slide-toggle #relayToggle  [checked]="hasBeenChecked" labelPosition="before" (change)="relayChanged($event)">
      Toggle
</mat-slide-toggle>

scss

:host {
  @include full-width();

  .mat-slide-toggle.mat-checked {

    & .mat-slide-toggle-thumb {
      background-color: #56ff00 !important;
    }

    & .mat-slide-toggle-bar {
      background-color: #56ff008a !important;
    }
  }

Answer 1

你有一个 main.scss 或类似的文件作为你的根目录下的scss文件。

在这个 main.scss (或者不管它在你的项目中被称为什么)，你可以通过 包括你的主题. 只需添加以下内容

// Theme customization
@import 'theme/theme';

在这个文件中。

然后在你的 theme 创建文件夹 _theme.scss 文件，并添加这段代码。

.mat-slide-toggle {
  border-top-color: pink;
}

为你的 .mat-slide-toggle