Angular中自定义类被ng-star-inserted覆盖如何强制生效

问题原因 #

自定义选择器权重低于Angular内置样式的权重，且单独使用::ng-deep没有精确匹配到目标元素，导致样式被覆盖。

解决方案 #

• 方法1：提升选择器权重（推荐，不会造成全局样式污染）
  搭配:host锁定当前组件范围，用更精确的选择器匹配元素，必要时加!important强制覆盖：

  :host ::ng-deep select[matNativeControl] option.test {
    font-weight: bold !important;
  }
  

• 方法2：关闭组件视图封装（不推荐，会导致当前组件所有样式全局生效）
  在组件TS文件的装饰器中添加视图封装配置，关闭后直接写.test样式即可生效：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    // 原有组件配置：selector、templateUrl、styleUrls等保持不变
    encapsulation: ViewEncapsulation.None
  })
  export class YourComponent {
    // 其他原有逻辑
    isBold:boolean=true;
  }
  

  注意使用该方法时要给自定义类加特殊前缀，避免和全局样式冲突。

• 方法3：替换为Angular Material官方的mat-select组件实现下拉功能，该组件对自定义样式的适配性更好，无需特殊处理即可生效。

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