如何自定义Mat Select选项中Mat Checkbox的颜色？

问题原因 #

Angular默认的**组件样式封装（ViewEncapsulation.Emulated）**会为组件内的样式添加专属属性，阻止样式穿透到Material组件的内部DOM结构，所以直接在组件CSS中重写.mat-pseudo-checkbox-full类不会生效。

可行解决方法 #

方法1：使用:host ::ng-deep穿透组件样式（组件内局部生效）

在对应组件的CSS/SCSS文件中添加以下代码，限定样式仅在当前组件内生效，避免全局污染：

:host ::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
:host ::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
    background-color: #2196F3; /* 替换成你需要的颜色 */
    border-color: transparent;
}

方法2：全局样式重写（所有Mat多选复选框生效）

如果需要全局统一修改样式，直接在项目根目录的styles.scss（或styles.css）中添加代码：

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
    background-color: #2196F3; /* 替换成你需要的颜色 */
    border-color: transparent;
}

方法3：覆盖Material CSS变量（推荐）

Material组件本身使用CSS变量定义样式，直接修改对应变量更符合设计规范：

• 组件内局部生效：

:host ::ng-deep {
    --mat-full-pseudo-checkbox-selected-icon-color: #2196F3; /* 替换成你需要的颜色 */
}

• 全局生效：

:root {
    --mat-full-pseudo-checkbox-selected-icon-color: #2196F3; /* 替换成你需要的颜色 */
}

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