Primeng - comment utiliser styleClass?

Question

Je souhaite utiliser la propriété styleClass du composant Togglebutton. Comme décrit dans n autre article , je pensais que c'était simple en utilisant:

styleClass="test"

Dans mon fichier css, j'ai ensuite défini certains attributs, comme

.test { background: red; }

Mais cela ne fonctionne pas. Travailler avec style est parfaitement clair en utilisant [style]="{'background':'red'}" Aucun problème avec cela. Mais styleClass ne fonctionne pas. Voici le composant . Une idée comment utiliser styleClass?

Answer 1

Pour être clair: la propriété styleClass n'est qu'un ajout aux classes d'origine du composant. Cela signifie que vous devez toujours utiliser les classes d'origine pour styliser le composant. Avec styleClass vous avez alors la possibilité d'adresser un ou plusieurs composants d'un ensemble de composants du même type. Donc, ayant cinq composants Togglebutton, vous pouvez généralement styliser ces composants avec

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

Si vous souhaitez ensuite appliquer un style différent à l'un de ces composants, vous pouvez ajouter la propriété styleClass:

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

Et dans votre css, vous pouvez maintenant répondre à celui-ci en:

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

Ainsi, styleClass ne remplace pas les sélecteurs d'origine, c'est un ajout.