如何修改Angular material datepicker年份切换箭头的颜色

Material的年份切换箭头本质是通过CSS border属性绘制的三角形，不是文本或SVG元素，因此直接修改color属性不生效，你之前找到的mat-calendar-arrow是箭头的容器类，所以仅能修改容器背景色。

问题对应的箭头样式参考：

可用修改方案 #

方案1：自定义CSS修改（适配临时或局部样式调整） #

• 全局样式生效（推荐用于深色主题全局适配，写在项目全局styles.css/styles.scss文件中）

/* 修改默认状态箭头为白色 */
.mat-calendar-arrow {
  border-top-color: #ffffff !important;
}
/* 可选：修改hover状态箭头颜色 */
.mat-calendar-arrow:hover {
  border-top-color: #cccccc !important;
}

• 单组件内生效（写在对应组件的样式文件中，需关闭组件样式封装）

/* 加:host避免样式污染全局 */
:host ::ng-deep .mat-calendar-arrow {
  border-top-color: #ffffff !important;
}

方案2：自定义主题配置修改（适配标准Material深色主题场景） #

如果你的深色模式是通过Angular Material官方自定义主题实现的，可以直接在主题定义中修改datepicker组件的foreground调色板对应的arrow属性值为白色，无需额外写自定义CSS。

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