Angular中:host ::ng-deep无法为Material复选框应用样式的问题

核心原因分析 #

你的问题本质是Angular视图封装机制阻止组件内样式穿透到Material内部组件，同时Material组件自身的样式优先级较高，导致常规选择器无法生效。以下是几种精准解决的方案，均不会影响其他组件：

方案1：宿主类+::ng-deep精准定位（最快生效） #

给目标<mat-select>添加自定义类，结合组件宿主限定+::ng-deep穿透，仅作用于当前组件内的指定多选框：

1. 模板中给mat-select加类：

<mat-select multiple class="local-multi-select">
  <mat-option *ngFor="let item of options" [value]="item">
    {{ item.label }}
  </mat-option>
</mat-select>

2. 组件CSS中编写样式：

/* :host 限定当前组件范围，避免全局污染 */
:host .local-multi-select ::ng-deep .mat-pseudo-checkbox-checked {
  background-color: #a9a9a9 !important;
  /* 可选：修改勾选图标颜色，增强对比度 */
  .mat-pseudo-checkbox-checkmark {
    background-color: #ffffff;
  }
}

方案2：自定义局部Material主题（无!important，更优雅） #

利用Material的主题系统局部覆盖样式，无需依赖::ng-deep，推荐使用SCSS编写：

1. 组件SCSS文件中引入Material主题并定义局部样式：

@import '@angular/material/theming';

@include mat-core();

// 复用现有主题变量，或自定义新主题
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// 仅对指定类的多选框应用自定义样式
.local-multi-select {
  @include angular-material-theme($app-theme);

  // 覆盖选中状态的复选框背景
  .mat-pseudo-checkbox-checked {
    background-color: #a9a9a9;
    .mat-pseudo-checkbox-checkmark {
      background-color: #ffffff;
    }
  }
}

2. 同样给<mat-select>添加local-multi-select类即可生效。

为什么你之前的方法无效？ #

• 直接写.mat-pseudo-checkbox-checked：Angular视图封装会将样式限定在当前组件，无法穿透到Material内部的mat-option子组件。
• 单独的:host ::ng-deep：选择器优先级不足，Material内部有更具体的选择器（如.mat-option-selected .mat-pseudo-checkbox-checked），需结合自定义类提升优先级。
• 全局样式中写mat-select.class .mat-pseudo-checkbox-checked：选择器层级错误，.mat-pseudo-checkbox-checked嵌套在mat-option内部，正确选择器应为mat-select.class .mat-option .mat-pseudo-checkbox-checked。

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