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

我正在尝试这样做，但似乎只能将其更改为“主”或“警告”。

控制角度材质元素颜色的正确方法是使用不同的托盘，但功能有限。如果需要更多控制，可以添加自定义CSS，在大多数情况下，需要使用

：：ng deep

强制应用样式，例如：

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

这是一个例子，当它选中时，我改变了边框和背景的颜色。您可以按照这种方式实现您想要的任何样式

如果您不熟悉

：：ng deep

，并且不真正理解，当您需要它时，您可以查看简短的答案

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

有关更多信息：

因此，请回答：

更新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 */
}

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

{{v.text}}

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

/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”

这些答案对我来说不适用于不确定的盒子。下列国家：

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

---

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

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

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

---

你需要CSS还是动态代码？我想CSS就足够了。我是新来的，谢谢你们两位。这就是我所做的：：：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-pseudo-checkbox-indeterminate、，.mat pseudo checkbox undeterminate{背景色：绿色！重要；}如果有帮助的话，你应该至少投票支持我的答案：）deep不受欢迎。@商业自杀我发现了一个解决方案：不确定它是否是最好的，但如果你小心使用全局css内容，它应该会很好。谢谢你，终于找到了解决方案，再次感谢！在开始时添加“：ng deep”，然后开始工作！。谢谢。如果您使用的是Angular的较新版本，则不推荐使用/deep/而不是for:：ng deepdeep。对于堆栈溢出，不建议使用纯代码回答，因为它们没有解释如何解决问题。请编辑您的答案，以解释此代码的作用以及它如何回答问题，以便它对OP以及具有类似问题的其他用户有用。对于Angular 9+版本，只需将“/deep/”替换为“：：ng deep”。

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

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