angular - 覆盖 md-dialog-container 的 Angular Material 大小和样式

Question

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

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

Answer 1

来自官方文档:

Styling overlay components

Overlay-based components have a panelClassproperty (or similar) that can be used to target the overlay pane.

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

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

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

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

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