如何更改 Angular 中 mat-dialog 的 Z 索引

我的应用程序使用多个 mat-dialogs，有时可能会同时显示 2 个，这会导致问题，因为第二个永远不会正确显示，而且它的模式使应用程序变得无用。经过更多研究后，我似乎可以通过调整 mat-dialog 的 z-index

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

}

但这并不能解决我的问题，因为它会将所有 z-index 更改为 500。我的问题是如何仅更改某些 mat-dialogs 的 Z-index。例如，我所有的基本对话框都可以是一个 z-index，因为它们永远不会同时显示，然后我有一些对话框会提醒或警告必须高于这些基本对话框的用户。使其可以由用户配置的最佳方法是什么？

打开对话框时您可以提供MatDialog配置 https://material.angular.io/components/dialog/api#MatDialogConfig into open方法。配置的一个属性是panelClass。所以在你的全局样式中你可以有一个类来改变z-index，仅当该类通过配置应用于模态时。

样式.css

.warning-dialog {
    z-index: 500 !important;
}

然后当打开对话框时，您可以在配置中传递类名：

this.dialog.open(
    YourComponent,
    {
        panelClass: 'warning-dialog'
    }
);

还可以考虑删除!important从你的风格来看，它通常会在未来的风格可维护性方面产生问题。