时间戳

首页 > 解决方案 > 如何覆盖组件中的 mat-slide-toggle/覆盖 Css

css - 如何覆盖组件中的 mat-slide-toggle/覆盖 Css

问题描述

我有一个组件是 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;
    }
  }

标签： cssangularjssassangular-materialless

解决方案

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

在这个main.scss（或你的项目中调用的任何内容）中，你可以包含你的主题。只需添加类似

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

在这个文件中。

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

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

有一个粉红色的顶部边框为你.mat-slide-toggle

推荐阅读