0

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.

unknown404
  • 115
  • 9

1 Answers1

2

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

Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
  • sorry, but it does not work. there is just one single Label in my application, which i want to be red. so I add to shared-styles.html: I can see in chrome debugger, that this file is active. when I put myLabel.setClassName("myLabel"); I can see that it took the classname, but the style still does not work styling was that much easier in vaadin8 :-/ – unknown404 Nov 05 '18 at 10:23
  • I do not know what is going wrong in your case, but I tried this out and added example that worked for me. – Tatu Lund Nov 05 '18 at 10:46
  • thank you so much for the detailled answer... this proves for me, that I am not crazy :-D The only thing different to mine is, that i am not in an implementation of RouterLayout, but in a Div, which is annotated by @Route may that cause any problems? – unknown404 Nov 05 '18 at 12:00