角材质在垫子复选框内更改刻度颜色

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

参考