1

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

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

}

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

4

1 回答 1

2

打开对话框时，您可以将MatDialogConfig提供到open方法中。config 的一个属性是panelClass. 因此，在您的全局样式中，您可以拥有一个将更改 的类，z-index前提是该类通过 config.

样式.css

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

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

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

还要考虑!important从您的样式中删除，它通常会在将来与样式的可维护性产生问题。

于 2021-09-24T20:04:35.587 回答