Angular Mat Checkbox自定义单独颜色：如何分别设置绿、红两色

要分别给两个Mat Checkbox设置不同颜色，核心是正确结合::ng-deep与自定义类名——你之前的写法错误地把类名放在了::ng-deep前面，导致样式无法精准作用到目标组件。以下是可行的实现方案：

保持原有HTML结构（确保类名正确绑定） #

<div class="half right">
    <mat-checkbox class="entradaCheck">Coming</mat-checkbox>
    <mat-checkbox class="salidaCheck">Exit</mat-checkbox>
</div>

注：可以移除color属性，避免默认主题样式干扰自定义效果

正确的CSS样式代码 #

/* 设置Coming复选框为绿色 */
::ng-deep .entradaCheck .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .entradaCheck .mat-checkbox-indeterminate .mat-checkbox-background {
    background-color: rgb(15, 91, 33) !important;
}

::ng-deep .entradaCheck .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
    background-color: rgba(15, 91, 33, 0.2) !important;
}

/* 设置Exit复选框为红色 */
::ng-deep .salidaCheck .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .salidaCheck .mat-checkbox-indeterminate .mat-checkbox-background {
    background-color: rgb(211, 47, 47) !important;
}

::ng-deep .salidaCheck .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
    background-color: rgba(211, 47, 47, 0.2) !important;
}

关键说明 #

• ::ng-deep必须放在自定义类名前面，才能穿透Angular的组件样式隔离，精准选中目标复选框的内部元素
• 给波纹效果设置半透明颜色，更符合Material Design的交互体验规范
• 若组件已设置ViewEncapsulation.None，可移除::ng-deep，但推荐保留以维持样式隔离性

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