Java/React/Hilla - CSS selector for row is not working

Question

I try to style my grid in a Hilla Project, but the css selector for a row is not working.

Simple grid with 3 columns, that works

<Grid items={ingredients} selectedItems={selectedIngredients}
                  onActiveItemChanged={e =>{
                setSelectedIngredients(e.detail.value? [e.detail.value] : []);
                console.log(selectedIngredients);
            }}>
                <GridColumn path={"id"}></GridColumn>
                <GridColumn path={"name"}></GridColumn>
                <GridColumn path={"val"}></GridColumn>
</Grid>

then i added some css for styling the component. Hilla documentation referenced to vaadin styling documentation. https://vaadin.com/docs/latest/components/grid/styling

selector like

vaadin-grid::part(row) {
    background-color: green;
}
vaadin-grid::part(selected-row) {
    background-color: green;
}

seems to have no effect. But its possible to change the background-color of the selected row by

vaadin-grid::part(selected-row-cell) {
    background-color: yellow;
}

Also hover effects can be added on cell level, but the ::part(row) selector has no effect.

What am I doing wrong? Is there any workaround?

Is it possible the cells have a background so that the rows' background is not visible through it? — Jakub Kotrs, May 17 '23 at 12:17
Basically what Jakub said. The background color is on the cells, not on the rows. And that is primarily because of frozen/fixed column support. A frozen/fixed column needs to show above other columns, so the background color is on the cells for that reason. — Jouni, May 17 '23 at 13:28

score 3 · Answer 1 · answered May 17 '23 at 13:25

As suggested by Jakub, in the default theme the background color is defined on individual cells: https://github.com/vaadin/web-components/blob/325917971162c7870e3ef1063a1519219aa7b71b/packages/grid/theme/lumo/vaadin-grid-styles.js#L42-L47

So to change the background color you need to target the cells instead:

vaadin-grid::part(cell) {
    background-color: green;
}
vaadin-grid::part(selected-row-cell) {
    background-color: green;
}

Java/React/Hilla - CSS selector for row is not working

1 Answers1