摆脱Angular Material模态对话框周围的空白区域

Question

我想摆脱Angular Material模态对话框中的空白区域.我如何设计CSS的样式,以便看不到任何白色？我的css到目前为止:

app-commission-me-dialog {
    margin: 0px;
    padding: 0px;
}

.mat-dialog-container {
    margin: 0px;
    padding: 0px;
}

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' })

链接到StackBlitz演示.阅读此官方文档以获取更多信息.

原始答案

使用ViewEncapsulation覆盖样式的默认样式.

在打开对话框的组件中,执行以下更改:

import {ViewEncapsulation} from '@angular/core';

@Component({
  .....,
  encapsulation: ViewEncapsulation.None 
})

并在该组件的css文件中,添加以下类:

.mat-dialog-container {
    padding: 0px !important;
}

这是Plunker Demo的链接.

Answer 2

我对所选答案做了评论,但我想在一个完整的答案中澄清一下.如果向组件添加对话框样式并将ViewEncapsulation设置为None,则这些样式将全局影响整个应用程序,并且将来的任何对话框都将打开而不进行填充.

而是选择使用对话框的panelClass属性:

component.ts

this.dialog.open(MyDialogComponent, {
  panelClass: 'app-full-bleed-dialog', 
  data: ...
});

全局样式表

.app-full-bleed-dialog .mat-dialog-container {
  padding: 0;
}

这样,您仍然可以对对话框组件样式进行封装,并且可以app-full-bleed-dialog根据需要有选择地重用您的类.

要阅读有关自定义材料组件的更多信息,请查看本指南.