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

Posted 2023-03-13

【中文标题】更改 Angular 9 mat-input 的初始颜色

【英文标题】：Change initial color of an Angular 9 mat-input

【发布时间】：2021-02-28 01:02:08

【问题描述】：

我在标准 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; 

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

【问题讨论】：

medium.com/wineofbits/…查看此链接

***.com/questions/38734518/…

【参考方案1】：

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

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

包含

.mat-focused

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

只需更改选择器

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

label.mat-input-placeholder

【讨论】：

改成什么？

编辑我的答案，您需要更改占位符而不是融合标签

我已将此添加到我的 .scss 中，但它不起作用... ::ng-deep .mat-form-field-label label.mat-input-placeholder color: white; 输入字段仍然显示黑色文本。

你能显示代码片段，你想在哪里改变文字颜色

已编辑原始帖子以显示 HTML...但描述已经准确。

【参考方案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;

【讨论】：

基本上，我认为您是在说添加 input color: #fff !important; 到我的 .scss。我试过了，但没有用。你的解决方案还有更多吗？也许您在 styles.scss 中有一些东西可以解决问题？

用你的第一个建议更新了我原来的问题。仍然需要下划线为白色。

你说得对，我的styles.scss 中有一些样式作为下划线谢谢你指出我会编辑我的答案。我尝试将在我的 styles.scss 中找到的样式放入组件中，但没有成功。

/点头。我无法在 styles.scss 级别进行更改，而且我已经有了 ::ng-deep .mat-form-field-underline color: #fff !important; 在模块 childClass 级别，但它似乎没有工作。感谢您一直以来的尝试。

您是否尝试过在您的子组件中使用 viewEncapsulate.none？ np芽