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

Posted 2023-03-06

【中文标题】角材料更改垫复选框内的刻度颜色

【英文标题】：Angular material change tick color inside mat-checkbox

【发布时间】：2021-02-09 09:19:04

【问题描述】：

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

【参考方案1】：

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

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

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

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

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

Ref