如何仅修改特定组件中mat-pseudo-checkbox的样式？

你遇到的问题是因为::ng-deep直接作用于全局类名时，会完全突破组件的样式隔离，导致所有匹配的元素都被影响。要限定在当前组件内的mat-option里生效，只需要给::ng-deep加上范围限制即可，有两种常用方法：

方法一：结合组件宿主选择器限定范围 #

利用:host选择器指向当前组件的宿主元素，把样式作用范围锁在组件内部：

:host ::ng-deep .mat-option .mat-pseudo-checkbox {
  display: none !important;
}

这样只会修改当前组件内所有mat-option下的伪复选框样式，不会影响其他组件。

方法二：给目标mat-option加自定义类精准控制 #

如果只想让部分mat-option生效，先在模板里给对应选项加自定义类：

<mat-option class="no-checkbox-option" value="...">
  选项内容
</mat-option>

然后在样式文件里针对这个类进行修改：

::ng-deep .no-checkbox-option .mat-pseudo-checkbox {
  display: none !important;
}

这种方式更灵活，能精准指定哪些选项隐藏复选框。

注意：如果不是必要，尽量少用!important，可以尝试调整选择器的优先级（比如叠加更多层级的选择器）来覆盖Material的默认样式，避免样式冲突隐患。

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