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文檔上找到有關deep用法的更多信息，並在此處（stackoverflow的問題）和angular的博客網站上找到其用法的更多示例。

如果您需要的是移除背景，請事先創建一個類，例如

.no-backdrop {
  background: none;
}

並將其添加到用於創建對話框的函數中：

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

您也可以將false作為值添加到hasBackdrop字段中，例如：

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

默認情況下，該值為true。

可以在角材v5的網頁上找到更多信息。

希望它可以幫助某人。