我可以使用一些自定义颜色以及如何更改 Angular Material 复选框的颜色吗? [英] Can I change the color of Angular Material checkbox with some custom color and how?

问题描述

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

I'm trying to do this, but is looks like it is only possible to change it to primary or warn.

推荐答案

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

The proper way to control colors of Angular Material elements is to use differrent pallettes, but the functionality is limited. If you want more control, you can add custom CSS, and in most cases you will need to use ::ng-deep to force your styles to apply, for example:

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

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

Here is a DEMO, where I changed the color of the border and background when it checked. You can follow this way to implement any styling you want.

如果你对::ng-deep不熟悉，也不是很懂，需要的时候可以翻翻这个简短的回答.

If you're not familiar with ::ng-deep and don't really understand, when you need it, you can look through THIS short answer.

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

There is another one way via encapsulation disabling (thanks to @Ventura). It has a right to exist, but be careful if you decided to disable encapsulation, don't confuse with stylesheets, because it behaves differently from what you expect from default Angular logic regarding CSS.

欲了解更多信息:https://coryrylan.com/blog/css-用角度组件封装

SO 答案:https://stackoverflow.com/a/54981478/6053654

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

The method is deprecated, see more info HERE or HERE.

这篇关于我可以使用一些自定义颜色以及如何更改 Angular Material 复选框的颜色吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！