Primeng - how to use styleClass?

Question

I want to use the styleClass property of the Togglebutton component. As described in another post, I thought it is straight forward by using:

styleClass="test"

In my css-file I then set some attributes, like

.test { background: red; }

But this does not work. Working with style is perfectly clear by using [style]="{'background':'red'}" No problem with that. But styleClass does not work. Here is the component. Any idea how to use styleClass?

For most PrimeNG stuffs, you need to override the original styles with styleClass in the root styles.css E.g: styleClass="test" then in styles.css you add your preferred styles using the test class. Now, PrimeNG components have different sections in their styles as well. For example: ui-datatable-header and such. If you want to change the datatable's header's style, you need to do .test .ui-datatable-header { } You might want to utilize Chrome Dev Tools to find the exact elements you want to style. (I am my phone so it's hard to make a plunker) — Chau Tran, Sep 22 '17 at 16:37
Thanks for your reply @ChauTran. I found out that the only way to use this property is to set `Viewencapsulation` to `none`. In addition, I had to use the original classes of the component, which looks like this: `.test.ui-state-highlight, .test.ui-togglebutton.ui-button.ui-state-active {}`. I couldn't find any other way to work with `styleClass` — Sheldon, Sep 23 '17 at 10:47
I am glad you found a solution. And yes, that's pretty much the only way to work with `styleClass`. And `styleClass` is to just differentiate between different similar components (like two dataTables). — Chau Tran, Sep 23 '17 at 13:13
@Chau Tran "And styleClass is to just differentiate between different similar components". That is the point I was not aware of. Thanks for clarifying! — Sheldon, Sep 23 '17 at 14:16

score 32 · Accepted Answer · answered Sep 24 '17 at 11:49

To make things clear: the styleClass property is only an addition to the original classes of the component. That means, you always have to use the original classes in order to style the component. With styleClass you then have the possibility to address one or more components of a set of components of the same type. So, having five Togglebutton components, you can generally style those components with

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

If you then want to style one of those components differently, you can add the styleClass property:

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

And in your css you can now address this one by:

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

Thus styleClass is not a replacement for the original selectors, it is an addition.

Do we have to set encapsulation to none to use these css? Because directly it doesn't work. — Ishan, Jan 22 '20 at 05:55

Cassius Horvath · Answer 2 · 2020-02-15T21:06:53.117

You can try to override o PrimeNg component doing this, eg. I was using tabMenu and worked:

<p-tabMenu styleClass="override-this"></p-tabMenu>

I suppose it will work with any PrimeNg component that accepts styleClass.

In root style.css file you just use body and then the styleClass name.

body .override-this{
  font-size: 10px;
}

I didn't test with other properties, probably if you need to change some deeper you will need to cascade like

body .override-this .ui-tabmenu .ui-tabmenu-nav and so on.

score 1 · Answer 3 · answered Oct 06 '22 at 11:50

1

If you want to keep the view encapsulation on, another option is to use :host together with ::ng-deep

:host ::ng-deep .test {
    background: red;
}

Note that ::ng-deep might be removed in the future. See this SO question.

answered Oct 06 '22 at 11:50

PeterS

181
1
11

score 0 · Answer 4 · answered Mar 16 '22 at 12:35

0

Example for p-dropdown

.p-dropdown {
  &.add-attr-dropdown {
    border: 0px;
  }
}

Here add-attr-dropdown is your custom class name

answered Mar 16 '22 at 12:35

Gowtham Gowda

1,780
1
10
7

Primeng - how to use styleClass?

4 Answers4

Linked