Vaadin Flow/10/11 style component via css

Question

My question is pretty basic.

How to add styling from a css-file to a basic vaadin component?

What I do NOT want to use:

• PolymerTemplate
• getStlye().set(...)

Do I have to @ImportHtml, which includes the css-code or do I have to @StyleSheet with the css-file? And afterwards, do I have to add the "css-style" via .getElement().getClassList().add(...)?

I really need help to have a working simple code example for a Label, Button or whatsever, please. I cannot find anything to satisfy my requirements.

Answer 1

In our documentation we guide to use @ImportHtml in MainView for global styles as a html style module.

In the global style module you can apply themable mixins to change stylable shadow parts, etc. of the components.

In case your target is not in shadow DOM, you can set the styles in custom styles block directly, e.g.

Say you have a Label and TextField in your application

   // If styles.html is in src/main/java/webapp/frontend/ path is not needed
   @HtmlImport("styles.html")
   public class MainLayout extends VerticalLayout implements RouterLayout { 
      ...
      Label label = new Label("Title");
      label.addClassName("title-label");
      add(label);
      ...
      TextField limit = new TextField("Limit");
      limit.addClassName("limit-field");
      add(limit);
      ...
   }

And in src/main/java/webapp/frontend/styles.html

   <custom-style>
      <style>
         .title-label {
            color: brown;
            font-weight: bold;
          }
          ...
      </style>
   </custom-style>

   <dom-module theme-for="vaadin-text-field" id="limit-field">
      <template>
         <style>
            :host(.limit-field) [part="value"]{
               color:red
            }
         </style>
      </template>
   </dom-module>

And your "Title" text will have brown bold font, and the value in text field will be red, but its title un-affected.

See also: Dynamically changing font, font-size, font-color, and so on in Vaadin Flow web apps