【问题标题】：How to overwrite mat-slide-toggle/ overwrite Css in components如何覆盖组件中的 mat-slide-toggle/覆盖 Css
【发布时间】：2020-08-29 07:13:26
【问题描述】：

我有一个组件是 Sample1.html.component ，其中包含 mat slide toogle，我添加了一个 scss 但它没有生效，这是因为默认的角度材料吗？谢谢。

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

角度工具

<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;
    }
  }

【问题讨论】：

您的代码是在哪个 scss 文件中编写的？此 scss 代码是否适用于您的组件？您需要创建一个theme.scss（或使用已经创建的那个）并将所有材料覆盖放在一个全局 scss 文件中。 material.angular.io/guide/theming
yeah2，这是我组件的作用域
那么它不能工作，因为 mat-slide 不是你的组件。您需要使用主题文件进行这些覆盖。
你这是什么意思？
我在我的组件中添加了 styleUrls : ['./sample1.component.scss']

标签： css angularjs sass angular-material less

【解决方案1】：

您的根文件夹中有一个main.scss 或与您的根 scss 文件类似的文件。

在这个main.scss（或您项目中的任何名称）中，您可以include your themes。只需添加类似

的内容

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

在这个文件中。

然后在您的theme 文件夹中创建一个_theme.scss 文件并添加以下代码：

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

为您的.mat-slide-toggle 设置一个粉红色的顶部边框

【讨论】：