Mat复选框内的角材料更改刻度颜色

Question

我正在尝试将mat-checkbox中的刻度颜色从白色更改为黑色，但是找不到刻度标记的CSS类，有人可以帮忙吗？

Answer 1

在任何浏览器中使用DevTools并选择要修改的HTML元素，您将发现哪些CSS类适用于此指定的HTML元素。

在您的情况下，如果您进入.mat-checkbox-background内部，您会看到检查图标是一个路径元素，并且其颜色是通过笔触设置的：#FFFFFF！important; CSS属性，因此您应该修改的类是 mat-checkbox-checkmark-path

   ::ng-deep .mat-checkbox-checkmark-path {
    stroke: black !important;
    }

您可以在component.css文件中使用以上代码检查 ::ng-deep

控制Angular Material元素颜色的正确方法是使用不同的货盘，但功能有限。如果需要更多控制，可以添加自定义CSS，在大多数情况下，您将需要使用:: ng-deep来强制应用样式。

Ref