PrimeNGダイアログでスタイルを適用

Question

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; 
} 

なしに動作しません。何か案が？

Answer 1

スタイル引数には、use []を使用する必要があります。例えば、<p-dialog [style]="{'margin-left':'80px', 'margin-right':'80px'}"></p-dialog>のようなインラインスタイルをp-dialogに適用する場合です。

少なくとも、自分のウェブサイトを見るときは、頻繁に更新されないように、[]、何も、[（）]を必要とするとき、私は自分自身を非常に混乱させることを認めなければなりません。だから、単にgithubのソースコードを見てみることをお勧めします。

Answer 2

あなたは、CSSファイルでスタイルは、あなたがui-dialogクラスを使用している場合は、あなたがそれらを使用する必要があり、また

.active{ 
    background-color:red 
} 

ようになります

、以下のように

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

を p-dialogの styleClassプロパティを使用することができます下位階層：

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

LIVE DEMOには両方の方法が含まれます