Question

如何将matInput更改为自定义颜色。我想更改占位符和下划线颜色。

我已经阅读了大多数帖子，找不到更改下划线的解决方案。

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

Stackblitz example

Image example

Answer 1

您可以使用普通的CSS

 ::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: green !important;
 }

 ::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: green !important;
} 

::ng-deep.mat-form-field-ripple {
 /*change color of underline when focused*/
 background-color: green !important;;
}

或创建要应用的自定义主题。这是文章，介绍如何创建自定义主题

https://alligator.io/angular/angular-material-custom-theme/

Answer 2

如果您正在使用材质主题，则可以使用强调或主色，只需在mat-form-field中添加color属性：

<mat-form-field class="example-full-width" color="accent">
   <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

Answer 3

有两个类， .mat-form-field-label （用于文本标签）和 .mat-form-field-underline （用于下划线）。通过为它们提供所需的样式来覆盖这两个类。

这是一个有效的链接

https://stackblitz.com/edit/angular-nhvrog-zexty5?file=styles.css

谢谢。

Answer 4

如果将表单放在div中并给它一个类，然后使用:: ng-deep className {...}，则不会覆盖应用程序中的所有“ mat-form-field”。

::ng-deep .create-account-form {
  .mat-focused .mat-form-field-ripple {
    /*change color of underline when focused*/
    background-color: @color-blue !important;
  }
  .mat-focused .mat-form-field-label {
    /*change color of label when focused*/
    color: @color-blue !important;
   }
}

<form class="create-account-form">
      <mat-form-field class="input-size">
        <input type="email" mdInput formControlName="email" placeholder="Email" required matInput>
      </mat-form-field>
</form>

更改matInput的颜色

4 个答案: