How to Use CSS for Vaadin Components

How can I use CSS for Vaadin components?

You can create you own custom theme. See https://vaadin.com/book/-/page/themes.creating.html how to do that.

In this theme you have a css style sheet where you can put your rules.

On every Component you can use the addStyleName function to add an additional class name:

Table table = new Table("MyCaption");
table.addStyleName("mystyle");

Now you can use this in your style sheet:

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

.mystyle{
  overflow: hidden !important;
}

How can i apply CSS to components in VAADIN 8

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

Vaadin Fusion Styling of Sub-Components

As the answer made its way to me on a different path, here is the solution for SO:

You can only apply styles to Vaadin components and their sub-components using a custom theme.

Here is a slightly extended way to set this up using a parent theme.

• Create a local custom theme in your app
  
  • path is frontend/themes/<my-theme-name>/
  • must contain a sub-directory components (to style Vaadin components)
  • must contain a styles.css (even empty)
  • must contain a theme.json with contents
    

    {
       "parent": "<my-parent-theme>"
    }
    

    but there are other keys for theme.json like importCss, documentCss or assets
  • the parent theme can be a pom dependency
• Use the custom theme in your Application.java:
  

  @Theme(value = "<my-theme-name>")
  public class Application extends SpringBootServletInitializer ...
  

• Then you can add style files locally to style Vaadin components, e.g.
  
  • add frontend/themes/<my-theme-name>/components/vaadin-upload.css:
    

    [part=file-list]::before {
      content: "These are the current files:";
    }
    

  • frontend/themes/<my-theme-name>/components/vaadin-upload-file.css:
    

    [part=name] {
      background-color: yellow;
    }
    

This applies to Vaadin21 (e.g. in Vaadin19 using a parent theme is not working this way).

---

Related Topics