different style, same components with same theme

Flow
1

Hello! I want to assign different “style” to same components. I mean for example that I have 2 buttons and I want the first red and the second green. Is there a way to do it on the same theme or not?
In html there is the possibility to add classes and id to any element and is really easy modify them on the css. But on Vaadin there are only default classes and if I assign a background red for v-button all the buttons will be red.

thanks

2

The method setStyleName(…) is for that. You have to set the respective CSS too.

3

Ok so I just have to use different themes.

Thank you Syam

4

You have to have a custom theme, yes - this allows you to create/modify the CSS classes.

But after that, by doing component#addStyleName, you are actually adding a CSS class to the root element of the component.

So, if you do button.addStyleName(“special-button”), the generated element will look something like

,,,

And you can then use CSS in your custom theme to change the background of just the special button e.g.

.v-button.special-button {
background: red;
}

In other words, you can do pretty much what you asked.

5

Ah OK! It’s awesome!! Thanks, I’m really newbie and I hope my questions will help even other people.