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’:
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?
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.
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:
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.