我可以使用一些自定义颜色更改角度材质复选框的颜色以及如何？

Question

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

Answer 1

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

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

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

如果你不熟悉::ng-deep并且不太了解，当你需要它时，你可以通过THIS简短回答。

UPDATE

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

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

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

Answer 2

你可以用这个：

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
    background-color: red !important; /* Red background for example */
}

Answer 3

在你的CSS上使用它。

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
    background: red;
}

您应该使用:: ng-deep，否则它将无效。

在您的Html上，使用这样的，

<mat-form-field>
  <mat-select placeholder="values" [formControl]="val" multiple>
    <mat-option *ngFor="let v of values" [value]="v">{{v.text}}</mat-option>
  </mat-select>
</mat-form-field>