我在更改田间垫子中的占位符颜色时遇到麻烦

Question

我不会更改输入占位符文本的颜色。它在垫子抽屉里。我尝试了几种方法来做到这一点：添加一个新类，在开发工具中查找此元素的路径 我对背景更改没有问题，但文本颜色根本不会改变。我需要一点指导

网页文件

<div class="selected-column" style="height: 90%" fxFlex="10" fxFlex.xs="100">
        <mat-form-field style="width: 100px">
            <input matInput
                    placeholder="From Date"
                    [(ngModel)] = "dayStart"
                    [dpDayPicker]="config.global.datePickerConfig"
                    theme="dp-material" attachTo=".mat-form-field-wrapper"
                    (displayDate) = "dayStart"
            />

        </mat-form-field>
</div>

SCSS

.mat-form-field-wrapper {
color: red;
}

input.mat-input-element {
color: red;
}
.mat-input-element .mat-form-field-autofill-control .cdk-text-field-autofill-monitored .ng-untouched .ng-valid .ng-dirty {
  color: red;
}

Answer 1

可能和有效的解决方案：

在基础组件中将封装设置为"无"，如下所示：

import {Component, ViewEncapsulation } from '@angular/core';
/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
  encapsulation: ViewEncapsulation.None,  <--- here
})
export class FormFieldOverviewExample {}

和要使用的 CSS：

.mat-focused .mat-form-field-label {
   color: red !important; -- on focus event
}
.mat-form-field-label {
   color: red !important;  -- for default color
}

Stackblitz