Angular Material 15.2.9：mat-datepicker-toggle禁用图标颜色异常

问题分析 #

你遇到的问题核心是Angular组件样式封装机制限制了自定义样式穿透到mat-datepicker-toggle内部的图标元素，同时Material内置的禁用状态样式优先级高于组件内的自定义样式，导致禁用图标始终显示黑色。

可行解决方案 #

方案1：使用::ng-deep穿透组件样式（组件内样式文件）

在组件的CSS/SCSS文件中添加以下代码：

::ng-deep .mat-datepicker-toggle.mat-datepicker-toggle-disabled .mat-icon {
  color: red !important;
}

::ng-deep会突破Angular的样式封装限制，让你的样式作用到Material组件内部的图标元素。

方案2：全局样式覆盖（无封装风险的方式）

将样式添加到项目根目录的styles.scss（或styles.css）中：

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

全局样式不受组件封装限制，能够直接覆盖Material的内置禁用样式，且不会破坏组件内的样式隔离。

补充说明 #

你之前的选择器逻辑是正确的，但因为组件样式的封装特性，自定义样式无法触达mat-datepicker-toggle内部的.mat-icon元素。上述两种方式都能解决样式优先级和穿透的问题。

内容的提问来源于stack exchange，提问作者JiboOne