Question

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

Answer 1

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

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

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

如果您不熟悉::ng-deep而且不太了解，那么当您需要时，可以查看THIS简短回答。

更新

通过封装禁用还有另一种方法（感谢@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

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

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

Answer 4

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

script:
  - dostuff1.sh & p1=$!
  - dostuff2.sh & p2=$!
  - dostuff3.sh & p3=$!
  - dostuff4.sh & p4=$!
  - wait $(jobs -p) || travis_terminate 1

角材料版本：“ 7.0.0”

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;
}

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

7 个答案:

更新