Customize vaadin components

Flow
1

Hello!
I am not professional java programmer. I am industrial automation software developer, but sometime I used java in my work, twice I used vaadin in my small projects.
Two week ago I stated learning vaadin again.
And I have some problems with leaning vaadin.
I want to write this problems and discuss about it.
The 1st problem is related to the difference between framework version, for example 7,8 and 14.
Examples and descriptions that are available for vaadin 8 they are not available for vaadin 14.
The 2nd problem is related with spring boot and vaadin. I create project with spring boot initializer, but i don’t understand why i can’t use my icon as favicon . I added icon.png to directory recources/META-INF/recources/icon as in yours example project but it didn’t work. But if i do as speaking spring and add favicon.ico to resource/static folder it will work correctly. Why some functionality does work in your project, but not work in my? I don’t understand.
And the 3rd problems - the biggest problem for me is related with customizing vaadin component as with CSS as programmatically.
I didn’t find description how customize component with CSS.
For example: I created layout and set id “header”, and then added h1 text and button.
Why construction

#header h1 {
...
}

work, but construction

#header button {
...
}

don’t work, but constraction below work

#header vaadin-button {
...
}

And I have many same examples. Could you give me a link for recourse where i find complete guide about styling vaadin components.
The same issue about customizing programmatically.
For example, I add two TextField, one of them has property ReadOnly=true, another ReadOnly=false.
I want to change border color, font color and background color in program.
I use constraction component.getStyle().set(“…”,“…”) but it work with ReadOnly=false component and don’t work with ReadOnly=true component.
Please, could you tell me about how can I understand principle program customizing components.

Thank you!

2

Hello, please see the styling documentation here: https://vaadin.com/docs-beta/v14/themes/themes-and-styling-overview/

As an example, you can style a TextField using the following CSS:

[part="input-field"]
 {
  opacity: 0.9;
}

:host([readonly]
) [part="input-field"]
 {
  opacity: 0.5
}

You can then [import the CSS file]
(https://vaadin.com/docs-beta/v14/themes/importing-style-sheets/) using @CssImport annotation:

@CssImport(value = "./styles/text-field.css", themeFor = "vaadin-text-field")
3

Thank you for answer!
I will definitely study the documentation you sent.
But I have some question.
Could you tell me about how can I change component style in program.
I change style with component.getStyle().set(“…”,“…”).
For example, I want to change background color, border color and font color for TextField witch has ReadOnly=true.