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

Question

我正在使用Angular Material,我正在使用md-dialog为我的画廊添加弹出窗口.默认动画和样式看起来不错.但是,我想改变尺寸的宽度和高度md-dialog-container？这是隐藏的.仅在我单击模态时添加,当您打开chrome dev工具时,您可以看到md-dialog-container显示的内容.包括如何覆盖其余样式.

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

Answer 1

从官方文档:

样式覆盖组件

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

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

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

之后,您需要提供css class作为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'
});