angular - 角材料更改垫复选框内的刻度颜色

Question

我正在尝试将 mat-checkbox 内的刻度颜色从白色更改为黑色，但我找不到刻度标记的 CSS 类，请帮助？

标签： angularangular-materialangular-material-8

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 来强制应用您的样式。

参考