How can i apply CSS to components in VAADIN 8

Question

I am trying to apply CSS to Vaadin 8 component. I have followed this example and still unable to apply CSS. I understand that i can call the addStyleName method and i am able to apply the build in ValoTheme styles (for example ValoTheme.PANEL_BORDERLESS does make a button smaller), but my custom styles are ignored. I have tried defining my custom CSS rules in the following files:

/src/Main/webapp/VAADIN/themes/apptheme/styles.css

@import "../reindeer/styles.css";

.mystyle {
    color: red;
    background: #012345;
    background-color: #012345;
}

Then in Java i create a button:

Button btn = new Button(" Test ");
  btn.addStyleName("mystyle");

My custom style does not get applied to the button. I suspect that i am not defining CSS correctly. Please share your knowledge of how to do this correctly in Vaadin 8.

Answer 1

This is not related, but are you actually using a reindeer theme?

Otherwise, you should put you styles in your own theme file (the default one generated from an archetype is mytheme.scss)

It's suggested to leave styles.scss as it is. Also, it's mentioned in comments section of the file:

This file prefixes all rules with the theme name to avoid causing conflicts with other themes. The actual styles should be defined in mytheme.scss

If you want, you could add your styles there as well under

.mytheme {

  @include addons;
  @include mytheme;

  .testStyle{
    color: red;
    background: #012345;
    background-color: #012345;
  }
}

While it works, I will still suggest to add them to your custom scss file (Based on your folder name it is apptheme.scss)

Mine mytheme.scss looks like this:

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  .testStyle{
    color: red;
    background: #012345;
    background-color: #012345;
  }
}

After styles are applied, button looks like this:

Style files are located under webapp/VAADIN/themes/mytheme