角度材質2：如何覆蓋對話框最大寬度爲100vw？

Question

我想創建100％寬度的對話框。但作爲原始設置，它被限制在80vw。

.mat-dialog-container{ 
    max-width:80vw; 
} 

我試過以下方法來覆蓋這個值。 但它並不成功。

.mat-dialog-container { 
    max-width: none; 
    width: 100vw; 
    height: 100vh; 
} 

而且

.mat-dialog-container { 
    max-width: none !important; 
} 

有人請建議我如何覆蓋80vw到100vw。謝謝。

Answer 1

在您的全球styles.css中添加一個css類，例如

.full-width-dialog .mat-dialog-container { 
    max-width: 100vw !important; 
} 

..然後提供panelClass到您的對話框：

this.dialog.open(MyDialogComponent, {panelClass: 'full-width-dialog'}) 

閱讀本documentation。

Answer 2

您是否在使用材料設計並嘗試覆蓋默認類？ 你需要使用更具體的CSS規則。以父元素爲目標，然後嘗試，!important也可能有所幫助。