Grid: how and where to define custom styles

Flow
1

This applies to Vaadin 14 where applying custom styles is rather confusing as compared to Vaadin 8.

I am trying to colour the rows in a Grid using Grid#setClassNameGenerator. The generator function returns either “myapp-log-error” or “myapp-log-warn”.
I defined custom styles for the rows in ‘table-styles.css’:

.myapp-log-error {
    background-color: rgba(255, 0, 0, 0.3);
}

.myapp-log-warn {
    background-color: rgba(255, 255, 0, 0.3);
}

I’m including this stylesheet by using @StyleSheet("table-styles.css") at the top of my view class.
I can see in the Chrome dev tools that the stylesheet has been loaded. I can also see that the class attribute has been correctly set in the grid. However, the browser does not apply the custom styles: the rows are all in the default style.

How can I get the browser to apply custom styles to the table rows?

2

The answer seems to be to use @CssImport(value = "./table-styles.css", themeFor = "vaadin-grid").
A bit more documentation on which resources are picked up when from where would also be useful. I’m running my applications (a SpringBoot project) from IntelliJ. The project is a multi-module Maven project. Only after a clean/install cycle is the style sheet picked up.
Also a custom style example in the Java API Examples section for the Grid component would be much appreciated.

3

Since the grid is using a Shadow-DOM, you will have to do it a little different. You can read up further on this topic in several locations (I use [this one]
(https://github.com/vaadin/vaadin-themable-mixin#style-scopes) to look things up, although it’s a bit outdated already), but IIRC there is no great tutorial on this yet. I have heard rumors that this is under way.

Here is what you have to change:
load the .css with the @CssImport annotation. In that annotation, you also define the tag where it should inject (lack of better word) the styles into, with the themeFor attribute:

@CssImport(value = "./table-styles.css", themeFor = "vaadin-grid")

and the style definitions also has to change the selectors to use [:host]
(https://developer.mozilla.org/en-US/docs/Web/CSS/:host()) syntax. I’m not 100% sure if my selectors are actually correct, I copied them from a comment [here]
(https://vaadin.com/docs/v10/flow/components/tutorial-flow-grid.html) and added your class

:host [part~="row"]
.myapp-log-error [part~="body-cell"]
 {
	background-color: rgba(255, 0, 0, 0.3);
}
4

Thank you. The link to vaadin-themable-mixin is a great resource in helping to understand what is going on.
Just using the simple, class-only selectors (e.g. .myapp-log-error) works for me. I think this is because, according to the JavaDoc, @CssImport with themeFor makes the style part of the shadow DOM.

5

Glad you got it working, Marcus. As you noted, themeFor is required when theming Vaadin components.

Kaspar Scherrer:
I have heard rumors that this is under way.

The rumors are true. :slight_smile: We’re working on improving the theming and styling section dramatically.