Change Background Color of whole grid

Flow
1

I want to change the background color of a whole grid. I tried grid.addClassName("my_class"); and .my_class { background-color: white;}, and a lot of different other things, but the Firefox CSS Analyzer keeps showing :host {background-color: var(--lumo-base-color);} on the vaadin-grid. As you can see, I am using a Lumo theme. How do I override this?

2

To change the background color of the grid you need to use CSS on the shadow dom. So you need a dedicated .css file, added to the layout or component via…

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

The file path can technically be anywhere under “frontend”. In that file you can target elements within the vaadin-grid. To change the background of the entire thing I believe you have to essentially select the grid cells individually:

:host(.my_class)  [part~="row"]
 [part~="cell"]
{
	background-color:White;
}

Note that this may override row striping, header cell colors, etc, so you may need to play with other select patterns to get exactly what you need.

Styling the shadow dom can be complex and annoying. It took me a few tries to understand it all. If you haven’t seen the docs they have improved a little:

https://vaadin.com/docs/v18/themes/styling-components.html

3

Thanks a lot :slight_smile: