更改 matInput 的颜色 [英] Change color of matInput

问题描述

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

How do I change matInput to a custom color. I want to change the placeholder and underline color.

我已经阅读了大部分帖子，但找不到更改下划线的解决方案.

I have read through most of the posts and could not find a solution to change the underline.

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

Stackblitz 示例

图片示例

推荐答案

你可以使用纯 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;;
}

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

or create custom theme to apply on.Here is article,how to create custom themes

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

这篇关于更改 matInput 的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！