Question

我正在使用Angular Material，我正在使用md-dialog为我的画廊添加弹出窗口。默认动画和样式看起来不错。但是，我想更改md-dialog-container大小的宽度和高度？这是隐藏的。仅在我单击模式时添加，当您打开chrome dev工具时，您可以看到md-dialog-container出现。请包括如何覆盖其余样式。

在一些帮助下非常感激。谢谢。

Answer 1

来自官方文件：

样式化叠加组件

基于叠加的组件有一个panelClass   属性（或类似），可用于定位覆盖窗格。

您可以通过在全局 styles.css 中添加css类来覆盖默认对话框容器样式。例如：

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

之后，您需要提供css class作为对话框的 panelClass 参数：

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

阅读此official documentation以获取更多信息。

Answer 2

无需添加全局样式。

您可以将其添加到自己的组件样式中：

::ng-deep .my-custom-dialog-class {
  mat-dialog-container {
    padding: 0;
  }
}

确保没有“”。（点类选择器）用于mat-dialog-container，因为您必须使用html标签选择器。

然后，当您打开对话框时，在panelClass属性中添加您的课程：

this.dialog.open(MyDialogComponent, {
  data: {},
  panelClass: 'my-custom-dialog-class'
});

通过使用自定义panelClass，即使使用ng::deep，也可以确保只有通过该类打开的对话框才会受到影响。

Answer 3

您可以通过设置open（）方法中的值来更改模态的宽度/高度，如下所示：

this.dialog.open(MyDialogComponent, {
  height: '300px'
  width: '400px'
});

Answer 4

    const dialogRef = this.dialog.open(WorkModalComponent, {
       width: '1200px',
       data: workObj,
       panelClass: 'my-dialog-container-class' // Replace with your actual dialog container class
    });

将panelClass添加到Dialog并将CSS样式添加到此类。

Answer 5

如果所有方法都无效，您可以尝试

const e: HTMLElement = document.getElementById(this.element.nativeElement.parentElement.id);
e.style.display = 'flex';

e.style.padding = '0';

覆盖角度材质大小和md-dialog-container的样式

5 个答案: