覆盖 md 对话框容器的角度材质大小和样式

Question

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

非常感谢一些帮助。谢谢。

Answer 1

来自官方文档：

设置叠加组件的样式

基于覆盖的组件具有面板类 可用于定位覆盖窗格的属性(或类似属性)。

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

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

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

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

有关详细信息，请阅读此官方文档。

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 添加到您的对话框并将您的 CSS 样式添加到此类中。

Answer 5

如果所有这些都不起作用，您可以尝试

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

Answer 6

我能够按照Faisal的解决方案使其与Angular 13一起使用，但是我必须添加：encapsulation: ViewEncapsulation.None用作对话框的@Component声明：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-progress-spinner-dialog',
templateUrl: './progress-spinner-dialog.component.html',
styleUrls: ['./progress-spinner-dialog.component.css'],
// this needed to override the mat-dialog-container CSS class
encapsulation: ViewEncapsulation.None
})

如果没有对ViewEncapsulation.None的引用，我就无法使CSS覆盖工作。我在这里找到了这个很好的提示：学习 Angular 11 MatDialog 基础知识