javascript - Angular Material 设计 MatInput 更改颜色

Question

我一直在玩 angular 5 和新的 Material design 5-rc.0。

由于某种原因，我无法更改 MatInput 标签的颜色。我的代码看起来像这样。

 <section class="login-form-container">
<form [formGroup]="form" class="text-center login-form">
    <div class="text-center">
      <div>
        <mat-form-field >
          <input class="input-line" matInput formControlName="username" placeholder="Input" color="blue">
        </mat-form-field>
      </div>
      <div>
        <mat-form-field >
          <input matInput formControlName="password" placeholder="Input">
        </mat-form-field>
      </div>
    </div>
  <button mat-button >LOGIN</button>
</form>

.login-form-container {
max-width: 422px;
margin: 0 auto;

.login-form {
  margin: 0 auto;
  background-color: white;
  border: 1px solid #d3d3d3;
  padding: 30px 60px;

  mat-form-field {
    width: 100%;
    margin: 18px 0;
    font-size: 16px !important;

    .input-line{
      color: #124cac !important;
    }

  }

  .mat-input-infix {
    font-size: 16px !important;
    color: $blue;
  }
}

button {
  background-color: #0a6ebe;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  letter-spacing: 1px;
  padding:0 50px;
  &:hover {
    background-color: #2196f3;
  }
}

}

我在这里找不到答案

Answer 1

你可以这样尝试（它有效，但我认为这不是一个好方法。）：

在您的组件中

import { AfterViewInit, ElementRef } from '@angular/core';
    ......  
    constructor(private elRef:ElementRef ){}
    ......

    ngAfterViewInit() {
      const matlabel: HTMLElement = this.elRef.nativeElement.querySelector('.mat-form-field-label');
      matlabel.style.color = 'white';
}