Special Theme for components (exceptions cases)



Vaadin 14.2

I am looking for example how to create exceptional cases for components

e.g. in my app, all text inputs looks same but one of them should be different.

So I tried use the addThemeName and create special css for that with no success


Any idea what am doing wrong, or where i can find more examples, does addClassName can assist here?


:host ([theme~="searchInput"]
	background: linear-gradient(to bottom, #d6d9de, #fefeff);
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
    border: 1px solid #1e5582;
    border-right: 0px;
    font-style: italic;

Did you remember to import your CSS file using the @CssImport annotation?


Sure, and it does worked for me when i remove the theme part

Perhaps the culprit is simply the space between :host and ([theme~="searchInput"] ). Could you try removing that?



it dose took some time. not only the that, must also have space between the host and part like that:

) [part="input-field"]