Angular中mat-datepicker显示在模态框后方问题求助

在Angular项目里，把mat-datepicker放在MatDialog模态框内时，弹出的日期选择器会被模态框挡住没法操作，调cdk-overlay-container的z-index也没用，试试下面的解决方法：

相关代码参考 #

模态框内的HTML代码

<div class="col-12">
  <mat-form-field appearance="fill">
    <mat-label>Fecha Inicio</mat-label>
    <input matInput [matDatepicker]="pickerOne" placeholder="ingresa una fecha" formControlName="year">
    <mat-datepicker-toggle matSuffix [for]="pickerOne"></mat-datepicker-toggle>
    <mat-datepicker #pickerOne class="custom-datepicker"></mat-datepicker>
    <mat-hint>este campo es obligatorio *</mat-hint>
  </mat-form-field>
</div>

打开模态框的TS代码

constructor(private dialog: MatDialog){}

onCreate(){
  this.dialog.open(ModalComponent, {
    width: '60%'
  })
}

已尝试但无效的CSS

.cdk-overlay-container{ z-index: 2200 !important; }
::ng-deep .cdk-overlay-container {
  z-index: 2200 !important;
}

有效解决方案 #

方案1：给模态框加自定义类，针对性调整层级

在全局样式文件（比如styles.css）中添加：

::ng-deep .custom-dialog .cdk-overlay-pane {
  z-index: 1300 !important;
}

::ng-deep .custom-dialog + .cdk-overlay-container .mat-datepicker-popup {
  z-index: 1400 !important;
}

打开模态框时指定自定义类：

onCreate(){
  this.dialog.open(ModalComponent, {
    width: '60%',
    panelClass: 'custom-dialog'
  })
}

方案2：直接给日期选择器弹窗设更高层级

全局样式里直接定位mat-datepicker的弹窗类，把z-index设得比模态框高：

::ng-deep .cdk-overlay-container .mat-datepicker-popup {
  z-index: 2300 !important;
}

默认MatDialog的z-index是1200，2300足够覆盖；如果你的模态框自定义了更高层级，把这个值调得比模态框的z-index大即可。

方案3：排查全局样式冲突

用浏览器开发者工具查看模态框和日期选择器的overlay元素，确认实际生效的z-index值，排查是否有其他全局样式覆盖了层级设置，再针对性调整。

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