需要爲材質設計2的md-dialog-container找到CSS選擇器

拼命想在角度2的材質設計中找到md-dialog-container的選擇器，但沒有成功。需要爲材質設計2的md-dialog-container找到CSS選擇器

我可以在沒有問題的情況下對chrome的f12進行更改，但是在css中使用有效的選擇器執行這些更改是個問題。研究/深入/但現在已被棄用。

我試過md-dialog-container {},md-dialog-container.md-dialog-container{}和md-dialog-container.md-dialog-container[role="dialog"]沒有成功。

附加的是我在chrome的f12中進行這些更改的圖像，沒有任何問題。

來源

2017-02-17 John Stafford

你正在運行到這個問題是由於ViewEncapsulation。默認情況下，Angular2使用模擬的Shadow DOM，它可以防止組件的樣式相互影響。您可以選擇退出ViewEncapsulation（不推薦），也可以選擇use the /deep/ selector。根據鏈接中提供的Angular文檔，使用此選擇器可以使用Angular默認的模擬Shadow DOM。

從我的理解來看，Angular擁有自己的CSS處理器，應該讓你現在可以使用這些選擇器。我假設他們被翻譯了。如果使用這些不是您的選擇，您將不得不切換到ViewEncapsulation.None。

import {ViewEncapsulation} from '@angular/core'; // and any other imports 

@Component({ 
    selector: 'my-selector', 
    templateUrl: './my-selector.component.html', 
    styleUrls: ['./my-selector.component.scss'], 
    encapsulation: ViewEncapsulation.None 
})

來源

2017-02-17 20:37:03

謝謝傑西。這確實適用於Chrome，Firefox和IE Edge。 '/ deep/md-dialog-container {}' –

我都試過上面提到的每一個選項，但不知何故與Angular2似乎沒有工作。我終於通過將這一行添加到我的頂級.css中來工作; '.MAT-對話框容器{填充：0像素重要;}'

來源

2017-04-21 06:08:26

下面是我工作：

設置此對話框組件本身：

封裝：ViewEncapsulation.None

在父組件中將panelClass設置爲o鋼筆例如

this.dialogRef = this.dialog.open(myDialogComponent, { 
    panelClass: 'my-dialog' 
});

在CSS的對話單元specifiy的panelClass例如

.my-dialog { 

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

來源

2017-10-20 12:08:27 sarora

很好用，謝謝。如果您在全局CSS文件中設置樣式，則無需執行ViewEncapsulation.None步驟 –

對我而言有意義 – sarora

-2

什麼工作對我來說是：

在設置panelClass開放如父組件

this.dialogRef = this.dialog.open(myDialogComponent, { 
    panelClass: 'my-dialog' 
});

在CSS

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

上述溶液中的好處是，它只會從除去填充特定的對話框不是應用程序中的所有對話框。

來源

2018-01-16 16:34:49 ask007

這可行，但無需重複上述答案 –

需要爲材質設計2的md-dialog-container找到CSS選擇器

回答

相關問題