How can I use CSS for Vaadin components?

Question

I seem to be seeing examples, where people answer to questions how to get some specific behavior from components by adding CSS code, however nobody seems to explain how to use that CSS code to connect it to Java components...

.v-table-body{
  overflow: hidden !important;
}

How do I use for instance this code on my table that I create?

Table table = new Table(caption);

    table.addContainerProperty("Visit ID", Long.class, null);

Solution

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;
}