角材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; 
} 

誰かがどのように100vwする80vwを上書きするように私に助言してください。ありがとうございました。

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も役立ちます。