我成功更新 .mat-dialog-container 樣式的唯一方法是添加 ::ng-deep
::ng-deep .mat-dialog-container {
overflow: hidden
}
據我了解，建議避免使用 :ng-deep。
沒有它我如何更新樣式？謝謝
uj5u.com熱心網友回復：
材質組件廣泛使用 cdk-over-lay。這使得我們需要使用全域樣式來更改 .css（cdk-over-lay 在應用程式“外部”創建一個 div，按 F12 鍵查看，這就是沒有 .css 可以“訪問它”的原因）。所以我們需要覆寫styles.css中的.css（一個ViewEncapsulation.None會產生同樣的效果）
如果我們想覆寫所有相同型別的組件，我們可以例如
//in styles.css
.mat-dialog-container{
background-color:red;
}
但是，如果我們只想更改特定組件的 mat-dialog 會發生什么？好吧，所有的材料組件（查看檔案）通常都有一個名為的屬性panelClass——在對話框的情況下，我們在“配置”中指出這個屬性——
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
panelClass: 'custom',
...
});
現在我們可以使用特異性并創建一個類
//also in styles.css
.custom .mat-dialog-container{
background-color:red;
}
uj5u.com熱心網友回復：
有一個選項：
添加
ViewEncapsulation.None到您的組件配置物件：@Component({ selector: 'tase-market-movements', templateUrl: 'market-movements.component.html', styleUrls: ['market-movements.component.scss'], encapsulation: ViewEncapsulation.None }) export class MarketMovementsComponent {}
然后您撰寫的所有樣式規則都適用于您的所有應用程式，這不好。
將所有 CSS 包裝在類中，（將其命名為組件的名稱）
.marketMoveementsComponent { // write all your css code }將此類名稱添加到模板中的包裝器標記
<div class="marketMoveementsComponent"> <!-- all your html code--> </div>
這樣你的 CSS 代碼仍然是從外部封裝的，但是連接到組件的 CSS 是封裝的。
祝你好運 ：）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/526100.html
標籤：有角度的角材料