如何在Angular材质中为文本输入着色

Question

这是我的用户表格：

我有一个问题，输入字段的颜色是白色，背景是相同的白色。我在任何地方都找不到如何更改输入字段的颜色。

彩色文本的属性css是什么？

这是我的模板：

<div class="example-container" style="color:red">
    <mat-form-field>
      <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
      <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  new contact

Answer 1

如果您没有在应用程序中包含主题，@JS 是正确的，但如果您对自定义输入字段的颜色属性感兴趣 -

要更改占位符的颜色（在本例中为“输入”），您可以更改以下类的“颜色”-

.mat-form-field-empty.mat-form-field-label {
    color: green;
}

用于在突出显示时更改下划线颜色-

.mat-form-field-underline {
    background-color: green;
}

您必须将此代码段包含在styles.scss（或styles.css）中。

Answer 2

Here is some most common properties of angular material v7

/* input color class */
::ng-deep input.mat-input-element {
  color: #484a4c;
}

/* Change label color on focused */
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  color: #50d0fb !important;
}

/* underline border color on focused */
::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple{
  background-color: #50d0fb !important;
}