Special Theme for components (exceptions cases)

Flow
1

B"H

Hello,

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

e.g.

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

Thanks

:host ([theme~="searchInput"]
)[part="input-field"]
 {
	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;
}
2

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

3

B"H

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

4

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

5

B"H

Thanks,

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

:host([theme~="searchInput"]
) [part="input-field"]
 {