在PrimeNG對話框中應用樣式

我遇到了麻煩，試圖在PrimeNG對話框中應用樣式。在PrimeNG對話框中應用樣式

我有有PrimeNG對話框組件：

<p-dialog header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal"> 
... 
</p-dialog>

我也有一個SCSS文件，在那裏我有樣式的分量。該對話框的背景顏色是透明的，但我想將其設置爲白色。所以，我試着應用的樣式以不同的方式在我的SCSS文件：

.ui-dialog { 
    background-color: #fff; 
}

添加styleClass的對話，並試圖樣式應用到它：

<p-dialog styleClass="dialog-filters" header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal"> 

.dialog-filters { 
    background-color: #fff; 
}

他們沒有工作。任何想法？

來源

2017-04-03 igogra

對於樣式參數，您應該使用use []。所以當你想將內聯風格應用到p對話框時，例如<p-dialog [style]="{'margin-left':'80px', 'margin-right':'80px'}"></p-dialog>。

我必須承認，當primeng需要[]，沒有任何或[（）]時，我至少在看到他們的網站時並不經常更新，我非常困惑。所以你最好在github上查看它們的源代碼。

來源

2017-05-27 19:07:40 Phil

您可以使用p-dialog如下styleClass屬性，在CSS文件

<p-dialog header="Title" [(visible)]="display" modal="modal" width="300" styleClass="active" > 
....

樣式將被作爲

.active{ 
    background-color:red 
}

或者，如果你正在使用ui-dialog類，你應該使用它們層次如下

p-dialog .ui-dialog { 
    background-color: red; 
}

LIVE DEMO包含兩種方法

來源

2017-05-27 19:28:26 Aravind

在PrimeNG對話框中應用樣式

回答

相關問題