Angular Material 15.2.9 中 mat-datepicker-toggle 禁用图标颜色的问题

Question

我目前正在使用 Angular Material 版本 15.2.9，遇到一个问题：

mat-datepicker-toggle

图标的禁用状态保持黑色，而启用状态正确显示为灰色。我尝试覆盖 CSS 来更改图标颜色，它成功应用于启用状态，但似乎对禁用状态没有影响。例如，即使我将图标颜色设置为红色，禁用的图标仍然显示为黑色。

<mat-form-field appearance="outline" class="w-100 date-input">
    <input
      [id]="'startDate' + idx"
      [formControl]="formManager.getStartDate(idx)"
      placeholder="MM/DD/YYYY"
      matInput
      readonly
      [matDatepicker]="picker"
      (click)="picker.open()"/>
    <mat-datepicker-toggle disabled matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

---

    .mat-datepicker-toggle.mat-datepicker-toggle {
      color: red !important;
    }

    .mat-datepicker-toggle[disabled] .mat-icon,
    .mat-datepicker-toggle.mat-datepicker-toggle-disabled .mat-icon {
      color: red !important;
    }

有人遇到过类似的问题，或者可以提供有关如何正确覆盖禁用状态颜色的见解吗？任何建议或解决方案将不胜感激。

Answer 1

此 CSS 将更改日期选择器中禁用图标的颜色

::ng-deep mat-datepicker-toggle > .mat-mdc-icon-button[disabled], 
.mat-mdc-icon-button.mat-mdc-button-disabled {
    cursor: default;
    pointer-events: none;
    color: red !important;
}
::ng-deep mat-datepicker-toggle > .mat-mdc-icon-button {
    color: red !important;
}

Stackblitz 演示