CSS for grid column setClassNameGenerator

Flow
1

Hi there
Since I am not a CSS specialist at all, I hope someone can help me here. I want to change the CSS for some grid cells and I tried to do this by using
column.setClassNameGenerator(object -> doSomething(object)?"selectedresult":null);
So far so good, the HTML now looks like this:
<td id="vaadin-grid-cell-7" role="gridcell" tabindex="-1" part="cell body-cell" last-column="" reorder-status="undefined" aria-selected="true" style="width: 100px; flex-grow: 1; order: 20000000;" class="selectedresult"><slot name="vaadin-grid-cell-content-7"></slot></td>

Currently my CSS looks like this:
.selectedresult { color: yellow; }
The problem now is that the CSS class is completely ignored. Is this because of the shadow dom? How would I change my CSS in order to get this to work?

2

If you are using CssImport you need to use theme-for. See here for an example: How do I set grid cell background color dynamically - Vaadin Cookbook
If you are using a theme, you need to create a file vaadin-grid.css in the components folder.
In that case the css you work in the shadow dom of the grid.
In Vaadin 24 it has changed. But I guess you’re not using it.

3

Here is the documentation: Styling Components | Custom Themes | Styling | Vaadin 23 Docs

4

Thank you very much for your answer and sorry for my late reply! You are right, currently I am using Vaadin 23 and for the CSS solution I am using CssImport. Or so I thought, but I am not sure, if this is working correctly. In my test project everything works fine, the CSS class is reconised and displayed correctly but in my real project the CSS somehow seems to be ignored. I’ll need to debug this.

5

It works now. :slightly_smiling_face: Thanks again for your help!