Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Primeng - how to use styleClass?

Tags:

primeng

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?

like image 554
Sheldon Avatar asked Sep 21 '17 17:09

Sheldon


People also ask

What is styleClass?

The style and styleClass attributes allow you to specify Cascading Style Sheets (CSS) styles for the rendered output of your tags.

How do you use style classes?

It is needed to stylize HTML elements – including changing colors, fonts, or the size of a text. If you want to use a class, use a full stop (.) followed by the class name in a style block. Next, use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size.


2 Answers

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.

like image 87
Sheldon Avatar answered Oct 16 '22 12:10

Sheldon


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.

like image 34
Cassius Horvath Avatar answered Oct 16 '22 12:10

Cassius Horvath