如何隐藏mat-datepicker组件头部的年份切换按钮

原样式失效原因 #

Angular默认开启视图样式封装（ViewEncapsulation.Emulated），组件内定义的样式只会作用于当前组件的直接DOM元素，无法渗透到Angular Material子组件内部的DOM结构，所以直接写.mat-calendar-period-button相关规则无法匹配到日期选择器内部的按钮元素。
另外你最后一段针对所有未禁用按钮的规则属于错误写法，会全局隐藏所有可点击按钮，建议直接删除。

正确实现方式 #

方案1：组件内使用::ng-deep穿透样式封装（适用只修改当前组件内日期选择器的场景） #

在当前组件的CSS文件中添加如下规则，搭配宿主选择器限定范围，避免全局污染，如果弹出层是全局挂载的场景该方案可能不生效，建议优先用方案2：

:host ::ng-deep .mat-datepicker-content .mat-calendar-period-button {
  display: none !important;
}

方案2：自定义panelClass搭配全局样式（更稳定，无废弃API风险） #

1. 给需要隐藏年份按钮的mat-datepicker组件添加自定义面板类：

<mat-datepicker #picker panelClass="hide-calendar-period-btn"></mat-datepicker>

2. 在项目全局样式文件（通常为src/styles.css/src/styles.scss）中添加对应规则：

.hide-calendar-period-btn .mat-calendar-period-button {
  display: none !important;
}

方案3：全局生效（适用所有日期选择器都要隐藏年份按钮的场景） #

直接在全局样式文件中添加如下规则即可，不需要加::ng-deep：

.mat-datepicker-content .mat-calendar-period-button {
  display: none !important;
}

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