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

Question

我正在使用 Angular Material，并且我正在使用 md-dialog 作为我的画廊的弹出窗口。默认的动画和样式看起来不错。但是，我想更改

md-dialog-container

的宽度和高度？这是隐藏的。仅当我单击模式时添加，当您打开 chrome 开发工具时，您可以看到

md-dialog-container

出现。请包括如何覆盖其余样式。

非常感谢您的帮助。谢谢。

Answer 1

来自官方文档：

设置叠加组件的样式

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

您可以通过在全局

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 基础知识

Answer 7

您可能需要像这样插入宽度/高度：

    const dialogConfig = new MatDialogConfig();
        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;
        dialogConfig.data = { title: 'Register a doctor shekh' };
        dialogConfig.height = '450px';
        dialogConfig.width = '700px';
        const dialogRef = this.dialog.open(AddDoctorComponent, dialogConfig);