Angular 9中修改ng-multiselect-dropdown组件X图标颜色的方法

在Angular 9中，由于组件视图封装（ViewEncapsulation）的特性，直接编写样式无法穿透到ng-multiselect-dropdown的内部元素，导致你无法修改选中项里的X图标颜色。可以通过以下方法解决：

方法一：使用深度选择器（::ng-deep） #

这是最推荐的方式，既能穿透样式封装，又能避免全局样式污染。

1. 打开浏览器开发者工具（F12），定位到选中项的X图标元素，确认其CSS类名。通常该图标对应的类是multiselect-item-close（部分版本可能嵌套在.multiselect-selected-item下）。
2. 在你的组件样式文件（如.component.scss或.component.css）中添加以下样式：

/* 针对X图标本身 */
::ng-deep .multiselect-item-close {
    color: #ff4444 !important; /* 替换成你需要的颜色值 */
    /* 可选：调整图标大小 */
    font-size: 18px;
}

/* 如果图标是i标签嵌套结构，用这个选择器 */
::ng-deep .multiselect-item-close i {
    color: #00C851 !important;
}

• ::ng-deep用来打破Angular的样式封装，让样式作用到第三方组件内部元素
• !important是为了覆盖组件自身默认的样式优先级

方法二：关闭组件视图封装（不推荐） #

如果深度选择器不生效，可以尝试关闭当前组件的视图封装，但这种方式会让组件内的样式全局生效，容易引发样式冲突：

在组件的TS文件中修改：

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 {
  // 组件逻辑
}

之后直接编写样式即可：

.multiselect-item-close {
    color: #33b5e5;
}

注意事项 #

• 不同版本的ng-multiselect-dropdown可能类名略有差异，务必通过开发者工具确认实际的元素类名
• 尽量避免全局样式修改，优先使用::ng-deep配合组件宿主选择器（如::ng-deep app-your-component .multiselect-item-close）来限定样式作用范围

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