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

Question

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

Answer 1

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

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

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

如果您不熟悉::ng-deep并且不太了解，当您需要它时，您可以查看这个简短的答案。

更新 1

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

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

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

更新 2

该方法已弃用，请参阅此处或此处的更多信息。

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

您可以使用此代码更改其框和复选图标：

/*  In case of using Angular 9+, Replace /deep/ with ::ng-deep */

/deep/ .mat-checkbox.mat-accent {
  .mat-checkbox-frame {
    border: 1px solid dodger-blue;
  }

  &.mat-checkbox-checked .mat-checkbox-background {
    background-color: white;
    border: 1px solid dodger-blue;
  }

  .mat-checkbox-checkmark-path {
    stroke: dodger-blue !important;
  }
}

角材料版本：“7.0.0”

Answer 4

对于不确定的盒子，这些答案对我不起作用。 以下做了：

::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: #222d32 !important;
}

Answer 5

在你的 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>

Answer 6

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #005691;
  }

Answer 7

我对更改复选框和标签文本周围框架的颜色特别感兴趣。 这对我有用：

div.mat-checkbox-frame {
    border-color: red;
}

span.mat-checkbox-label {
    color: red;
}

Answer 8

不得不这样做，其他答案略有不同：

::ng-deep .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
  background: $my-colour;
}

Answer 9

您可以使用

.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: $your-color-code !important;
}