angular - 如何在 Material 对话框 (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;
}

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