CSS代码删除Angular Material v5模式背景

Question

我想删除模态上的背景，我知道打开模态时有一个hasBackdrop属性，但是我只想根据模态上发生的某些情况隐藏背景。因此，我本以为可以使用CSS进行此操作，但是在检查了模态上的元素之后，我找不到与背景的CSS相关的任何内容。

Answer 1

.mat-dialog-container具有box-shadow，您可以删除方框阴影。例如，您可以添加box-shadow: none;作为内联角色或box-shadow: none !important;。两者都将删除盒子阴影。

Answer 2

  

尝试一下：

在您的.css / .scss文件中覆盖类

/deep/.cdk-overlay-dark-backdrop {
    background:none!important;
}

Answer 3

我很不明白这个问题。

如果，您可能需要删除对话框的阴影框，只需找到包含您需要处理的对话框的组件，找到其样式文件并添加以下内容即可：

/deep/.mat-dialog-container {
  box-shadow: none;
}

可以在angular docs上找到有关deep用法的更多信息，并可以在here (stackoverflow's question)和angular's blog website上找到其用法的更多示例。

如果，您需要删除背景幕，然后预先创建一个类似

的类

.no-backdrop {
  background: none;
}

并将其添加到用于创建对话框的函数中：

this.dialog.open(LoaderComponent, {
  backdropClass: 'no-backdrop',
});

您还可以将false作为值添加到字段hasBackdrop中，例如：

this.dialog.open(LoaderComponent, {
  hasBackdrop: false
});

默认情况下，该值为true。

更多信息可以在angular material v5的网页上找到。

希望它可以帮助某人。