用于删除 Angular 材质 v5 模态背景的 CSS 代码

Posted 2023-03-06

【中文标题】用于删除 Angular 材质 v5 模态背景的 CSS 代码

【英文标题】：CSS Code To Remove Angular Material v5 Modal Backdrop

【发布时间】：2019-01-16 19:30:30

【问题描述】：

我想删除模态框上的背景，我知道打开模态框时有一个 hasBackdrop 属性，但我只想根据模态框上发生的某些条件隐藏背景。所以我想我可以用 css 做到这一点，但是在检查模态元素后，我找不到与背景 css 相关的任何内容。

【参考方案1】：

我完全不明白这个问题。

如果你需要删除对话框的阴影框，只需找到包含你需要处理的对话框的组件，找到它的样式文件并添加：

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

更多关于deep 的使用信息可以在angular docs 上找到，更多关于它们的使用示例here (***'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的网页上找到。

希望它对某人有所帮助。

【参考方案2】：

.mat-dialog-container 有box-shadow，可以去掉box-shadow。例如，您可以添加 box-shadow: none; 作为内联角色或 box-shadow: none !important; 。两者都会移除 box-shadow。

【参考方案3】：

试试这个：

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

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