angular - 我可以使用一些自定义颜色更改 Angular Material 复选框的颜色吗？如何更改？

Question

我正在尝试这样做，但看起来只能将其更改为主要或警告。

Answer 1

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

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: violet;
}

这是一个DEMO ，我在检查时更改了边框和背景的颜色。您可以按照这种方式实现您想要的任何样式。

如果你对::ng-deep不熟悉，不是很了解，需要的时候可以翻翻THIS简短的回答。

更新 1

还有另一种方法是通过禁用封装(感谢@Ventura)。它有权存在，但如果您决定禁用封装，请小心，不要与样式表混淆，因为它的行为与您期望的有关 CSS 的默认 Angular 逻辑不同。

更多信息:https://coryrylan.com/blog/css-encapsulation-with-angular-components

所以答案:https://stackoverflow.com/a/54981478/6053654

更新 2

该方法已弃用，请参阅更多信息 HERE或 HERE .