Angular中如何使用::ng-deep仅为指定单个mat-checkbox应用样式

• 第一步：给需要修改样式的第一个mat-checkbox标签添加自定义类，修改后代码示例如下：

<mat-checkbox
    *ngIf="currentSelectedTenants(subtenant) else currentSubtenants"
    color="accent"  
    [(ngModel)]="dealDispositionFormFields.currentSubtenants"
    [checked]="currentSelectedTenants(subtenant)" 
    (change)="changeCurrentSubtenants($event,subtenant)"
    style="margin-left:10px;"
    class="custom-blue-checkmark"
>
    <mat-label class="alter-text-color" style="font-size: 12px;">{{subtenant.subtenantName}}</mat-label>
</mat-checkbox>

• 第二步：调整原有CSS代码，给选择器加上自定义类的限制，修改后CSS如下：

.custom-blue-checkmark::ng-deep .mat-checkbox-checkmark-path {
    stroke:rgba(0, 125, 255, 1) !important;
}

以上写法会先匹配到带custom-blue-checkmark类的复选框元素，再通过::ng-deep穿透修改它内部的对勾路径样式，不会影响其他未添加该类的同类型复选框。

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