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
?
The style and styleClass attributes allow you to specify Cascading Style Sheets (CSS) styles for the rendered output of your tags.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With