Vaadin 14 - Grid::setClassNameGenerator doesn't work

Question

I have a problem with setting a background color for each row in a grid. I use setClassNameGenerator, but this doesn't work. However, if I set the className for the whole grid, then I can see some result. In the end, I want to color the rows based on certain conditions, but for now I just hard-coded one class "failed" to see if coloring works.

---

Here is my CSS code:

---

Execution of this snippet doesn't change anything

---

However, this makes the whole background yellow as expected, so the CSS import is ok.

---

Any help would be great. Thanks

Answer 1

You say that your last code works "so the CSS import is ok" - No, it's not.

It's a huge difference because the row styles need to be defined inside the grid component's scope while setting the background of the whole grid can be done with global css. This is because Grid is using a shadow-DOM. You canread up on that here, or more extensively here

What you need to do in order to load your CSS into the scope of the grid component is add theparameter themeFor = "vaadin-grid" to the @CssImport annotation.

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