Question

我不会更改输入的占位符文本的颜色。它在垫子抽屉内容中。我尝试了几种方法：在开发工具中添加一个新类，为该元素查找路径。我对背景的更改没有问题，但文本颜色完全不会更改。我需要一些指导

html文件

<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

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

1 个答案: