css 如何改变垫错误的颜色(角材料)？

nom7f22z 于 2022-12-01 发布在其他

关注(0)|答案(6)|浏览(135)

我在一个表单中使用了Angular Material的mat-error来显示验证错误。默认情况下，这些错误显示为橙色。是否可以调整它的样式，使它们变为红色？
我试探着：

mat-error{
    color: red !important;
}

没有成功。
提前感谢您！

6条答案

试试这个CSS。

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

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

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

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

试试这个

.mat-form-field-appearance-legacy .mat-hint
 {
    color: red;
}

您可以自定义主题。请参阅here
或者在css中添加::ng-deep：
mat-error ::ng-deep{ color: red; }但是，不建议使用::ng-deep方法，请参阅此处

从今天起，这些都以红色显示。

您可以通过更改主题中的警告调色板来更改错误颜色，请参阅https://material.angular.io/guide/theming