如何修改Angular 14中Kendo DropDownList的弹窗背景色？

问题根源 #

Kendo下拉的kendo-popup是动态生成在当前组件DOM树之外的（一般挂载到<body>），而Angular默认的样式隔离（ViewEncapsulation.Emulated）会给组件内的SCSS添加专属属性选择器，导致你的样式无法匹配到这个外部生成的弹窗元素——这就是为什么DevTools手动改能生效，但SCSS设置无效的原因。

三种可行解决方案 #

1. 使用样式穿透（::ng-deep）

在组件的SCSS里用::ng-deep打破样式隔离，直接作用到外部的kendo-popup：

// 基础写法，修改所有kendo-popup背景
::ng-deep .kendo-popup {
  background-color: purple;
}

// 结合主题切换的场景，假设主题类加在body上
::ng-deep body.purple-theme .kendo-popup {
  background-color: purple;
}
::ng-deep body.dark-theme .kendo-popup {
  background-color: #2d2d2d;
}

如果怕全局污染，可以给当前组件加个专属类，缩小作用范围：

::ng-deep .my-custom-dropdown .kendo-popup {
  background-color: purple;
}

2. 写到全局样式文件

把弹窗样式放到项目根目录的styles.scss（或全局样式文件）里，这里的样式不受组件隔离限制：

// 全局生效的弹窗样式
.kendo-popup {
  background-color: purple;
}

// 配合主题切换，根据根元素的主题类切换颜色
body.purple-theme .kendo-popup {
  background-color: purple;
}
body.light-theme .kendo-popup {
  background-color: #ffffff;
}

3. 配置popup挂载到组件内

通过popupSettings的appendTo属性，把弹窗挂载到当前组件DOM范围内，这样组件内的样式就能直接生效：
首先在组件TS里配置：

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

@Component({
  selector: 'app-my-dropdown',
  templateUrl: './my-dropdown.component.html',
  styleUrls: ['./my-dropdown.component.scss']
})
export class MyDropdownComponent {
  // 配置弹窗挂载到当前组件
  public popupSettings = {
    appendTo: 'component'
    // 也可以指定具体容器：appendTo: '.dropdown-wrapper'
  };
}

然后在组件模板里绑定这个配置：

<kendo-dropdownlist [popupSettings]="popupSettings" ...></kendo-dropdownlist>

最后在组件SCSS里直接写：

.kendo-popup {
  background-color: purple;
}

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