我将输入颜色更改为具有深色背景的较亮颜色,如下所示:
我构建自己的输入组件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;
}