我正在嘗試在不觸摸style.css檔案的情況下更改對話框背景。
正如其他一些答案所說，有很多方法可以設定 Dialog 樣式：
1 - 此解決方案適用于寬度和高度，但透明背景被“忽略”。
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: "myClass",
});
.myClass{
background-color: transparent !important;
max-width: none !important;
}
2 - 您也可以::ng-deep這樣使用：
在這種情況下，背景顏色設定為透明，但所有對話框都需要此屬性，我不希望這種情況發生
::ng-deep mat-dialog-container {
background-color: transparent !important;
}
對于我看到的panelClass: "myClass"選項覆寫了這個類cdk-overlay-pane
同時我需要覆寫的是mat-dialog-container不影響其他對話框。
有沒有辦法在不影響其他對話框的情況下做到這一點？
uj5u.com熱心網友回復：
在您的組件樣式表中使用host，您只需修改該特定組件的樣式：
:host ::ng-deep mat-dialog-container {
background-color: transparent !important;
}
更新
因此，為了自定義材質對話框，您需要創建一個自定義 css 類，并在您的style.scss檔案中設定該類：
style.scss
.custom-modalbox > mat-dialog-container {
background-color: transparent !important;
}
在你MatDialog注入的地方，使用css該類作為panelClass屬性：
YourComponent.ts
onOpenDialig() {
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: 'custom-modalbox', // if you don't set this
// that css class won't applied
});
}
因此，其他組件可以安全地使用對話框，而不會影響它們不使用的外觀和感覺custom-modalbox
uj5u.com熱心網友回復：
嘗試使用 ::ng-deep 但是這種方式，例如
::ng-deep {
.mat-dialog-container{
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
background: #7e2727;
color: rgba(0, 0, 0, 0.87);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448386.html
下一篇：折疊的移動回應表