如何修改Angular中mat-datepicker预选今日日期的颜色

方法1：组件内穿透样式 #

在目标组件的CSS/SCSS文件中添加以下代码，替换为你需要的颜色值：

::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-active):not(.mat-calendar-body-hovered) {
    background-color: #4CAF50; /* 自定义背景色 */
    color: #ffffff; /* 自定义文字颜色 */
}

/* 鼠标悬停时的样式 */
::ng-deep .mat-calendar-body-today.mat-calendar-body-hovered:not(.mat-calendar-body-selected):not(.mat-calendar-body-active) {
    background-color: #45a049;
}

注：::ng-deep用于穿透组件样式隔离，Angular新版本中虽不推荐，但仍是组件内修改第三方组件样式的有效方式。

方法2：全局样式修改 #

在项目根目录的styles.css（或styles.scss）中添加样式，所有Mat-Datepicker都会生效：

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-active):not(.mat-calendar-body-hovered) {
    background-color: #4CAF50;
    color: #ffffff;
}

.mat-calendar-body-today.mat-calendar-body-hovered:not(.mat-calendar-body-selected):not(.mat-calendar-body-active) {
    background-color: #45a049;
}

方法3：自定义主题（推荐） #

若使用Angular Material自定义主题，可在主题文件中修改对应变量：

@use '@angular/material' as mat;

$custom-theme: mat.define-theme(
    (
        color: (
            primary: mat.define-palette(mat.$blue-palette),
            accent: mat.define-palette(mat.$pink-palette),
            warn: mat.define-palette(mat.$red-palette),
            calendar: (
                today-text: #ffffff,
                today-background: #4CAF50,
                today-hover-background: #45a049
            )
        )
    )
);

将该主题应用到项目后，所有日历组件的今日按钮会自动使用配置的颜色。

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