Angular 15 <mat-datepicker>单元格内容对齐异常问题求助

• 检查Angular Material主题加载顺序
  确认angular.json的build.options.styles数组中，Angular Material的预构建主题样式（如@angular/material/prebuilt-themes/indigo-pink.css）排在自定义样式文件之前。升级后样式顺序错乱可能导致初始渲染时组件样式未正确继承。示例配置：

  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
  ]
  

• 触发日历组件初始重绘
  点击后恢复正常说明初始渲染存在样式计算异常，可在组件初始化时手动触发重绘：

  import { ViewChild, AfterViewInit } from '@angular/core';
  import { MatDatepicker } from '@angular/material/datepicker';
  
  export class YourComponent implements AfterViewInit {
    @ViewChild(MatDatepicker) datepicker!: MatDatepicker<Date>;
  
    ngAfterViewInit() {
      setTimeout(() => {
        this.datepicker?.openedStream.subscribe(() => {
          const calendarContent = document.querySelector('.mat-datepicker-content');
          if (calendarContent) {
            calendarContent.style.display = 'none';
            setTimeout(() => calendarContent.style.display = '', 0);
          }
        });
      }, 0);
    }
  }
  

• 排查全局样式冲突
  升级前的全局样式（如对td、table的强制对齐设置）可能残留并干扰组件样式。临时注释全局SCSS中类似td { text-align: left !important; }的规则，测试是否解决问题。

• 验证依赖版本匹配
  执行npm ls @angular/core @angular/material检查版本树，确保@angular/core和@angular/material版本完全一致（Angular 15.x对应Material 15.x），版本不兼容可能引发渲染bug。

• 强制覆盖组件样式
  尝试用穿透样式强制修正选中日期的对齐，注意仅作为临时修复方案：

  :host ::ng-deep .mat-calendar-body-selected {
    text-align: center !important;
  }
  

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