擺脫角度材質模態對話框中的空白空間

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。