I’m aware of the difference between setStyleName and setPrimaryStyleName but I must say I was surprised when I noticed that setStyleName doesn’t set the style name of child divs as setPrimaryStyleName does. See attached screenshots showing the difference for the ProgressBar component where I’ve applied the class “answer-rate” with setStyleName and setPrimaryStyleName respectively. This means I cannot apply my own class to a child div, for example “*wrapper”. Why doesn’t setStyleName add the style to child div as well?
I don’t know what use cases the setPrimaryStyleName() is originally for, it’s not mentioned in the tickets, but it should almost ever if never be used. I can think of using it to make a component look like something else, as a CSS styling trick, but it’s a very special use case.
Normally, what you need is CSS selectors that match the outer element and perhaps some inner implementation-specific element of a component. For example, in your case you should normally have a rule such as:
.answer-rate {...general styling for the component...}or some implementation-specific styling such as:
.answer-rate .v-progressbar-wrapper .v-progressbar-indicator {...whatever here...}Now, having it
.answer-rate .answer-rate-wrapper .answer-rate-indicator {...}isn’t meaningful, because the wrapper and the indicator are completely implementation-specific elements to ProgressBar. If you later change to use some other component than ProgressBar, the entire HTML element structure might change to something else - it most probably would not have a wrapper or indicator elements such as those.
The method setPrimaryStyleName is for cases where you e.g. want to create a custom component that inherits TextField but shouldn’t use any of its styles. Thus, you need to provide all of its styles explicitly - not even the base styles that are often required for the functioning of a component are applied automatically.
Some components copy also the user defined styles (set with setStyleName()/addStyleName()) to certain sub-elements. If there is a sub-element which could logically be considered to be “stable API” for the component, you could
create an enhancement request
to request automatic copying of those styles to the sub-element.
OK, thanks for the input but let me put the question differently. How would I do if I want to use the ProgressBar component but without the ugly animated background set in v-progressbar-wrapper? Should I create a new class and inherit v-progressbar-wrapper by using SASS but where I somehow override the background and then set this new class as the primary style of the ProgressBar component? I could of course modify the background image but that would impact ALL progressbars which isn’t desired in my case.
Use the progressbar.addStyleName(“answer-rate”) and then set the wrapper background in CSS/Sass with:
.answer-rate .v-progressbar-wrapper {background: green;}…or whatever you want the background to be instead of the animation…