CODEWITHSUNDEEP
htmlcssreactjsvaadinhilla
GoodBytes
GoodBytes

Reputation: 11

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

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?

Upvotes: 1

Views: 113

Answers (1)

Sascha I&#223;br&#252;cker
Sascha I&#223;br&#252;cker

Reputation: 815

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;
}

Upvotes: 3

Related Questions