У меня проблема с изменением цвета заполнителя в mat-from-field

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

Возможное и рабочее решение:

Установить инкапсуляцию None в базовом компоненте, например:

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