我可以使用某些自定义颜色来更改“角度材质"复选框的颜色吗? [英] 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.

这篇关于我可以使用某些自定义颜色来更改“角度材质"复选框的颜色吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！