如何修改Angular Kendo Switch组件的颜色？

我在用Angular版Kendo UI的Switch组件，代码如下：
component.html

<kendo-switch name="isActive" onLabel="Yes" offLabel="No" class="switch" [(ngModel)]="inspectionPlan.isActive"></kendo-switch>

想把默认的蓝色激活态改成红色，通过开发者工具找到了默认样式：

.k-switch-on .k-switch-track {
    border-color: #0d6efd;
    background-color: #0d6efd;
}

但在组件scss里写的覆盖样式不生效：
component.scss

.k-switch-on .k-switch-track {
    border-color: red !important;
    background-color: red !important;
}

这是因为Angular默认的ViewEncapsulation.Emulated视图封装机制，会给组件内的样式添加唯一隔离属性，导致无法匹配Kendo组件内部的DOM元素。以下是三种可行的解决方法：

方法1：使用::ng-deep穿透视图封装 #

在组件的scss文件中用::ng-deep包裹样式，穿透Angular的视图隔离，直接作用到Kendo组件内部元素：

::ng-deep .k-switch-on .k-switch-track {
    border-color: red;
    background-color: red;
}

不需要额外加!important，::ng-deep的优先级足够覆盖默认样式。

方法2：关闭组件的视图封装 #

在组件的TS文件中，修改装饰器的encapsulation属性为ViewEncapsulation.None，让组件内的样式变为全局生效样式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {
  // 组件逻辑代码
}

注意：关闭视图封装后，组件内的所有样式会影响全局，需避免和其他组件样式冲突。

方法3：写入全局样式文件 #

把修改样式直接放到项目的全局样式文件（如styles.scss）中，全局样式不受组件视图封装限制：

.k-switch-on .k-switch-track {
    border-color: red;
    background-color: red;
}

这种方式适合需要全局统一修改所有Kendo Switch组件样式的场景。

内容的提问来源于stack exchange，提问作者Georgi Yakov