更改 Angular 9 mat-input 的初始颜色

Question

我在标准 mat-form-field 中有一个标准 matInput 字段，该字段位于标准 [formGroup] div 中。父区域的背景是深色的，输入的默认颜色是深色的。那效果不好。这是 HTML 的示例..

<div [formGroup]="myInfo">
  Year: &nbsp;
  <mat-form-field>
    <input class="myClass" style="color: white" matInput (keypress)="numericOnly($event)" placeholder='YYYY' 
           formControlName="yearControl">
  </mat-form-field>
</div>

在线查看并根据此处的答案，我了解如何更改 .scss 中的内容，例如：

.childClass {
  input { color: #fff !important; }
  label.mat-input-placeholder { color: #fff !important; }
  ::ng-deep .mat-form-field-label { color: #fff !important; }
  ::ng-deep .mat-form-field-ripple { color: #fff !important; }
  ::ng-deep .mat-form-field-underline { color: #fff !important; }
}

这终于把占位符文字改了，输入的文字是白色的，但是下划线还是黑色的。感谢您一直以来的建议。

Answer 1

它不起作用，因为你的选择器

::ng-deep .mat-focused .mat-form-field-label

包含

.mat-focused

只有当你专注于领域时它才有效

只需更改选择器

::ng-deep .mat-form-field-label 和占位符颜色

label.mat-input-placeholder

Answer 2

我将输入颜色更改为带有深色背景的较亮颜色，如下所示：

我构建了自己的输入组件switched-input.component

html:

 // switched-input.component.html
 <mat-form-field>
   <input matInput placeholder="{{placeholder}}" [formControl]="inputControl"/>
 </mat-form-field>

scss:

// switched-input.component.scss
mat-form-field {
  width: 100%;
}
// color of the text typed by the user when input is selected
input {
  color: #fff !important;
}

ts：

// switched-input.component.ts
import { FormHelper } from './../../../helper/form.helper';
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'switched-input',
  templateUrl: './switched-input.component.html',
  styleUrls: ['./switched-input.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class SwitchedInputComponent implements OnInit {
  inputControl: FormControl;

  @Input() placeholder: string;

  @Input() set control(controlObj: FormControl) {
    this.inputControl = controlObj;
    if (this.placeholder && this.placeholder !== '') {
      this.placeholder = this.translateService.instant(this.placeholder);
    }
  }

  get control(): FormControl {
    return this.inputControl;
  }

  constructor(private translateService: TranslateService) {}

  ngOnInit() {

  }    
}

此外，为了更改下划线颜色以及输入字段的标签颜色，我必须在我的应用程序主 style.scss 文件中使用以下样式

// styles.scss
// underline color of mat input fields
.mat-form-field-underline {
  background-color: #fff !important;
}
// label color of mat input fields
.mat-form-field-appearance-legacy .mat-form-field-label {
  color: #fff;
}