如何在“材质”对话框（MatDialog）上自定义ngx-material-timepicker的CSS Z-index（大于1000）？

Question

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

constructor(public dialog: MatDialog) { }

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

PopupComponent：

@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;
}

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

Answer 2

我找到了解决方法。我更改了z-index的{​​{1}}

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

MatDialog