摆脱角度材质模态对话框中的空白空间

Question

我想摆脱角度材质模态对话框中的空白区域。我如何设计CSS，让我看不到任何白色？我的css到目前为止：

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

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

Answer 1

使用ViewEncapsulation覆盖默认样式与您的样式。

在打开的对话框中的分量，做如下更改：

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

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

，并在该组件的CSS文件，添加以下类：

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

这里是Plunker Demo的链接。

Answer 2

我对所选答案发表了评论，但我想在一个完整答案中作出澄清。如果您将对话框样式添加到您的组件并将ViewEncapsulation设置为无，这些样式将全局影响您的整个应用程序，并且任何未来的对话框都将打开而无需填充。

而是选择利用对话框的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类。

要了解更多关于定制材料部件的信息，请致电check out this guide。