Primeng: Example for [styleClass]

[malorus]

Could someone provide an example of how to use the styleClass property? I tried

<p-toggleButton [styleClass]="'test'"></p-toggleButton>

In my css-file I have:

.test { background: red; color: yellow;}

But this does not work at all. An example would be great.

[ghost]

try this -

::ng-deep .test { background: red; color: yellow;}

[malorus]

Thanks mate, but it didn't work. I still don't see any effect. Any idea?

[Sumragen]

@malorus Hello,

As you can see, that class was added to the element

But .css class should be defined as

:host /deep/ .test {
  /*...*/
}

Hope that helps.

[malorus]

Thanks @Sumragen for your reply. I don't know why, but it does not work for me this way. But I found a different way. For all those ones interested: I set Viewencapsulation to none. But that's not all. I then have to select the full classes in my css:

.test.ui-state-highlight, .test.ui-togglebutton.ui-button.ui-state-active {}

It was the only way that worked for me.

[malorus]

Now I understood the concept of the styleClass property. It is only an addition and not a full replacement for the original classes of that component. My misconception was that I thought it is a replacement. Thanks for your contribution guys. I'll close this issue now as it is clear.

[jayanth0907]

@malorus Could you please let me know how did you solve the issue? I followed the steps but still didn't work.

[malorus]

@jayanth0907 styleClass is not a replacement for the original selectors, it is an addition.
For example: Let's say you have several toggle-buttons and one of them should be styled differently. This one should get an additional class via the styleClass property:

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

Now, in your css you can address all toggle-buttons with the following classes:
.ui-togglebutton.ui-button.ui-state-active

And to address only the third one, you can refer to the additional class:
.different.ui-togglebutton.ui-button.ui-state-active

Hope this makes things clear...