覆盖 md-dialog-container 的角度材料大小和样式 [英] Overriding Angular Material Size and Styling of md-dialog-container

问题描述

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

I am using Angular Material and I am using md-dialog for my popups for my gallery. The default animation and styling looks nice. However, I would like to change the width and height of size of the md-dialog-container? which is hidden. Only added when I click the modal and when you open the chrome dev tools you can see the md-dialog-container appearing. Do include how to override the rest of the styling.

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

Much appreciate with some help. Thanks.

推荐答案

来自官方文档:

样式叠加组件

基于叠加层的组件有一个 panelClass可用于定位覆盖窗格的属性(或类似属性).

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

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

You can override the default dialog container styles by adding a css class in your global styles.css. For example:

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

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

After that, you'll need to providies you css class as a panelClass parameter to your dialog:

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

阅读此官方文档 了解更多信息.

Read this official documentation for more information.

这篇关于覆盖 md-dialog-container 的角度材料大小和样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！