Angular Material 2:如何将Dialog max-width覆盖为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

在全局中添加一个css类,styles.css例如

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

..然后提供panelClass给你的对话框:

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

阅读此文档.

Answer 2

尝试直接使用属性名称，如下所示：

this.dialog.open(MyDialogComponent, {maxWidth: '100vw !important'});

这在Angular 7中对我有效。

Answer 3

解决此问题的最简单方法：

 const dialogRef = this.dialog.open(
      MyDialogComponent, {
        width: '100vw',
        maxWidth: '100vw',
                         }
                                  )