PrimeNGスタイリング/テーマ

Question

primeNGパネルコンポーネントの背景のスタイリング/テーマを変更する方法についてのアドバイスを探しています。

コンポーネントのscssファイルで以下の名前を使用して上書きしようとしました。しかし、それは動作しませんでした。それだけコンポーネントの背景ではなく、タイトルのヘッダを変更

<p-panel header="Test" [style]="{'background': '#20A8D8 '}" [toggleable]="true">

インライン私が試みました。誰もがコンポーネントを汚したりスキンしたりして、それをどうやって説明するのを助けてくれるのかなと思います。

これらは、パネルのためにご利用いただけます - 上書き/それらにアクセスする方法だけでわからない：

UIパネルのコンテナ要素。 ui-panel-titlebarヘッダーセクション。 ui-panel-titleパネルのタイトルテキスト。 ui-panel-titlebar-togglerアイコンを切り替えます。 ui-panel-contentパネルの内容。

おかげ

Answer 1

それは簡単です、次のようなあなたのCSSファイル内のクラスとしてそれらを使用する：

.ui-panel-title { // Your css code for Title text of the panel. }

は、styleClassのプロパティを、あなたと

Answer 2

オーバーライドPrimeNGのコンポーネントのスタイルを助けたホープルートstyles.cssまたはstyles.scss（あなたがSCSSを使用している場合）にあなたのスタイルを入れなければなりません。

私のスタイルはPrimeNGパネルフッターのスタイルを上書きします：

.editClientPanel .ui-panel-footer { 
background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%); 

}

はそれが役に立てば幸いかは問題では過去のやり方なら、あなたはなかった何かを学んだ願っています。