在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对话框中应用样式

回答

相关问题