如何为嵌套在mat-menu和mat-toolbar中的多个Angular Material复选框设置不同边框颜色？

你之前的写法无效，核心原因是没有正确选中复选框内部负责边框渲染的.mat-checkbox-frame子元素——border-color样式需要直接作用在这个元素上，而非.mat-checkbox本身。

正确的CSS写法 #

结合你自定义的类名和::ng-deep，精准定位每个复选框的边框元素：

/* 第一个无类名的复选框，设置白色边框 */
::ng-deep .mat-menu-panel-custom .mat-checkbox:not(.a02):not(.a03) .mat-checkbox-frame {
    border-color: white;
}

/* 带a02类的复选框，设置黄色边框 */
::ng-deep .mat-menu-panel-custom .mat-checkbox.a02 .mat-checkbox-frame {
    border-color: yellow !important;
}

/* 带a03类的复选框，设置橙色边框 */
::ng-deep .mat-menu-panel-custom .mat-checkbox.a03 .mat-checkbox-frame {
    border-color: orange !important;
}

说明 #

1. 利用.mat-menu-panel-custom（你的mat-menu类名）限制样式作用范围，避免影响全局的Angular Material复选框
2. 通过.mat-checkbox.a02 .mat-checkbox-frame的层级选择器，精准指向对应复选框内部的边框元素
3. !important用于覆盖Angular Material默认样式的优先级（如果不加不生效的话保留，生效可以尝试去掉）

你的HTML结构无需修改，保持原有的类名即可：

<mat-menu #m1="matMenu" class="mat-menu-panel-custom">
  <mat-toolbar>
              <mat-checkbox></mat-checkbox>
              <mat-checkbox class="a02"></mat-checkbox>
              <mat-checkbox class="a03"></mat-checkbox>
  </mat-toolbar>
</mat-menu>

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