Primeng-styleClassの使用方法

Question

styleClassコンポーネントのTogglebuttonプロパティを使用します。別の投稿で説明されているように、私はそれを使用することで簡単だと思った：

styleClass="test"

私のcssファイルでは、次のようないくつかの属性を設定します

.test { background: red; }

しかし、これは機能しません。 styleの操作は、[style]="{'background':'red'}"それで問題ありません。ただし、styleClassは機能しません。ここにコンポーネントがあります。 styleClassの使用方法はありますか？

Sheldon · Accepted Answer

明確にするために：styleClassプロパティは、コンポーネントの元のクラスへの追加にすぎません。つまり、コンポーネントのスタイルを設定するには、常に元のクラスを使用する必要があります。 styleClassを使用すると、同じタイプのコンポーネントのセットの1つ以上のコンポーネントに対処することができます。したがって、5つのTogglebuttonコンポーネントがあるので、通常、これらのコンポーネントを

.ui-togglebutton.ui-button.ui-state-active{}

それらのコンポーネントの1つを異なるスタイルにしたい場合は、styleClassプロパティを追加できます。

<p-toggleButton styleClass="different"></p-toggleButton>

そして、CSSで次の方法でこの問題に対処できます。

.different.ui-togglebutton.ui-button.ui-state-active{}

したがって、styleClassは元のセレクタの代わりではなく、追加です。