Цвет фона для фона выбора даты: # 418D2E

Question

Я пытаюсь добавить цвет фона в css для значка календаря в окне выбора даты углового материала. Я не получаю никаких изменений.

<mat-form-field class="mr3">
    <input matInput [matDatepicker]="startdate" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="startdate"></mat-datepicker-toggle>
    <mat-datepicker #startdate></mat-datepicker>
</mat-form-field>

<mat-form-field class="ml3">
    <input matInput [matDatepicker]="enddate" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="enddate"></mat-datepicker-toggle>
    <mat-datepicker #enddate></mat-datepicker>
</mat-form-field>

Невозможно увидеть какие-либо изменения. Он показывает тот же цвет фона по умолчанию.

Answer 1

Я не знаю точно причину, но чтобы перезаписать стили угловых материалов, вы должны добавить свой CSS в файл styles.css (глобальный). Таким образом, в этом файле вы можете просто перезаписать любое свойство, которое вам нужно.

.mat-datepicker-toggle .mat-icon-button {
  background-color: red;
}
.mat-calendar {
  background-color: lightgreen;
}

Взгляните на этот рабочий пример .