Angular Material日期选择器输入文字及下划线改为白色的问题求助

架构老林

2026-8-4

Angular Material Datepicker：全局修改输入文字与下划线为白色

问题场景

使用Angular Material的Datepicker组件，需要将输入框的日期文字和下划线改为白色，当前仅在input标签内添加style="color:white;"生效，尝试过多个CSS方案但未达到全局修改效果。组件代码如下：

<mat-form-field class="date-criteria-select " [floatLabel]="'always'">
    <mat-label class="upside-label">{{label}}</mat-label>
    <input matInput [matDatepicker]="picker" [min] = "minDate" [max] = "maxDate" [(ngModel)] = "date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

无效方案分析

.mat-form-field-underline使用color属性错误：该元素的下划线由background-color而非color控制
.mat-input-element未生效可能是因为Angular视图封装限制，组件内样式无法穿透到Material组件的内部DOM
.mat-datepicker-content作用于日期选择器弹窗内容，与输入框样式无关

有效全局CSS方案

将以下代码添加到全局样式文件（如src/styles.scss）中，即可实现全局修改：

/* 修改输入框文字颜色 */
.date-criteria-select .mat-input-element {
  color: white;
}

/* 修改默认状态下划线颜色 */
.date-criteria-select .mat-form-field-underline {
  background-color: white;
}

/* 修改聚焦状态下划线波纹颜色 */
.date-criteria-select .mat-form-field-ripple {
  background-color: white;
}

/* 可选：若标签也需要白色，添加此规则 */
.date-criteria-select .mat-form-field-label {
  color: white;
}