如何为ng-select容器添加自定义类名？尝试containerClass无效

你可以通过containerClass属性给ng-select的外层容器添加自定义类，没生效大概率是Angular样式隔离导致自定义样式无法穿透到ng-select组件内部，按以下步骤操作即可解决：

1. 在ng-select标签上添加containerClass属性：

<ng-select
    name="symbolPairsId"
    formControlName="symbolPairsId"
    id="symbolPairsId"
    [items]="setupTags"
    bindLabel="name"
    bindValue="id"
    [closeOnSelect]="true"
    [hideSelected]="true"
    multiple="true"
    containerClass="success"
></ng-select>

2. 在组件的样式文件（.css/.scss）中使用深度选择器穿透样式隔离，编写你的自定义样式：

// 给ng-select外层容器应用样式
:host ::ng-deep .success {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

// 如果需要修改下拉面板样式，可继续嵌套选择器
:host ::ng-deep .success .ng-dropdown-panel {
  border-color: #28a745;
}

补充说明 #

• 若你使用的是动态类名（比如从组件变量获取），则需要用属性绑定语法：[containerClass]="yourClassNameVariable"
• ::ng-deep是Angular中穿透样式隔离的常用方式，虽然被标记为deprecated，但目前仍是处理第三方组件样式的可靠方案；若不想用::ng-deep，也可以将组件的viewEncapsulation设置为None，但此方式会让组件样式全局生效，需谨慎使用。

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