如何在材质对话框 (MatDialog) 上自定义 ngx-material-timepicker 的 css z-index (more 1000)？

Question

我ngx-timepicker-field的在MatDialog。当我的时间选择器显示时，他在MatDialog模态弹出窗口的后面。

constructor(public dialog: MatDialog) { }

const dialogRef = this.dialog.open(PopupComponent, {
    data: {
        ...
    },
    position: {
        top: '50px'
    }
});

弹出组件：

@ViewChild('sendAlertHour', {static: false} ) sendAlertHour:  NgxTimepickerFieldComponent;

<div>
    <ngx-timepicker-field #sendAlertHour></ngx-timepicker-field>
</div>

Answer 1

在全局样式表 (styles.scss) 中添加以下内容：

.timepicker-overlay {
  z-index: 1100 !important;
}

.timepicker-backdrop-overlay {
  z-index: 1100 !important;
}

这将在材质对话框上方显示时间选择器。解决方案在这里找到。

Answer 2

我找到了一个解决方法。我改变z-index了MatDialog

我将其添加到我的 Angular 应用程序的全局 CSS 文件中：

.cdk-overlay-container {
    z-index: 500 !important;
}