如何更改垫子错误（角材料）的颜色？答案

【问题标题】：How to change color of mat-error (Angular Material)?如何更改垫子错误（角材料）的颜色？
【发布时间】：2021-01-12 05:32:06
【问题描述】：

我在表单中使用 Angular Material 的 mat-error 来显示验证错误。这些默认显示为橙色。是否可以调整其样式以使其变为红色？

我试过了：

mat-error{
    color: red !important;
}

没有成功。

提前谢谢你！

【问题讨论】：

【解决方案1】：

试试这个 CSS。

 .mat-input-invalid .mat-input-placeholder {
    color: red;
}

.mat-input-invalid .mat-input-ripple {
    background-color: red;
}

【讨论】：

【解决方案2】：

您可以将其添加到 :root {}

:root {
  .brand-theme .mat-error {
    color: red;
  }
}

【讨论】：

【解决方案3】：

您可以自定义主题。见here

或者在css中添加::ng-deep：

mat-error ::ng-deep{ color: red; } 但是，::ng-deep 方法已被弃用，请参阅here

【讨论】：

【解决方案4】：

截至今天，这些都显示为红色。

【讨论】：