Material Dialog内Kendo Grid列筛选嵌入Angular Material Datepicker层级遮挡问题

方案1：自定义Mat Datepicker叠加层层级（实现成本最低） #

这是最快捷的修复方案，通过给日期选择器的弹出层指定自定义样式类，强制提升其z-index优先级，确保高于Kendo筛选弹窗的层级。
代码示例：

1. 给mat-datepicker组件添加panelClass属性

<!-- 自定义筛选模板中的datepicker代码 -->
<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="选择日期">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker panelClass="high-zindex-datepicker"></mat-datepicker>
</mat-form-field>

2. 在全局样式文件（如styles.scss）中添加对应样式：

.high-zindex-datepicker {
  /* Kendo筛选弹窗默认z-index通常在1002~1004区间，可根据自身项目实际调试调整数值 */
  z-index: 1006 !important;
}

方案2：全局配置Kendo Popup挂载容器（从根源避免层级冲突） #

将所有Kendo弹出组件的默认挂载容器调整为Angular CDK的overlay容器，让Kendo弹窗和Material弹窗归属同一个叠加层上下文，CDK会自动根据打开顺序分配层级，无需手动管理z-index。
在根模块（AppModule）中添加provider配置：

import { NgModule } from '@angular/core';
import { POPUP_CONTAINER } from '@progress/kendo-angular-popup';

@NgModule({
  // ... 其他模块配置
  providers: [
    {
      provide: POPUP_CONTAINER,
      useFactory: () => document.querySelector('.cdk-overlay-container')
    }
  ]
})
export class AppModule { }

方案3：局部指定Datepicker挂载容器（无全局污染） #

如果不想全局修改Kendo配置，可单独为筛选模板中的日期选择器指定挂载容器为当前组件的视图容器，让datepicker弹出层直接渲染在Kendo筛选弹窗内部，自然层级更高。
自定义筛选组件的代码示例：

import { Component, ViewContainerRef } from '@angular/core';
import { MAT_DATEPICKER_DEFAULT_OPTIONS } from '@angular/material/datepicker';

@Component({
  selector: 'app-grid-date-filter',
  template: `
    <input matInput [matDatepicker]="picker">
    <mat-datepicker #picker></mat-datepicker>
  `,
  providers: [
    {
      provide: MAT_DATEPICKER_DEFAULT_OPTIONS,
      useFactory: (viewContainerRef: ViewContainerRef) => ({
        viewContainerRef: viewContainerRef
      }),
      deps: [ViewContainerRef]
    }
  ]
})
export class GridDateFilterComponent {}

注意事项 #

• 若使用组件内样式添加z-index配置，需要搭配::ng-deep使用，且建议加上组件选择器限制作用范围，避免全局污染
• 三种方案可根据项目实际情况选择，项目中大量混用Kendo和Material弹窗的场景更推荐方案2，临时修复选方案1即可

内容的提问来源于stack exchange，提问作者Víctor Domínguez Aragón