Vaadin: how do I style a specific Grid?

Question

I have a view with a Grid and I have a style for grid's cells:

[part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: var(--lumo-space-xl);
}

If I apply this style in via @CssImport like

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

it works but this will apply to all Vaadin Grids, that it not what I want. If I don't specify themeFor this will not apply.

I want to apply this style just to the grid in the view where the grid is defined.

I tried using a theme like:

:host([theme~="custom-grid-theme"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: var(--lumo-space-xl);
}

and then on the grid

grid.addThemeName("custom-grid-theme");

but it doesn't work.

I tried too:

grid.getElement().setAttribute("theme", "custom-grid-theme");

this doesn't work too and it removes any GridVariant I applied.

I am using Vaadin 14.

Thanks for the help.

Answer 1

The CSS looks correct and addThemeName() seems to be used correctly too, so I would expect that to work.

You could try a couple of things:

1. Use the DOM inspector in the browser's devtools to check that the theme attribute is applied to the correct vaadin-grid element.

2. The entire solution could be simplified a bit since vaadin-grid-cell-content is not inside the grid's shadow DOM. Try this instead:

grid.addClassName("custom-grid-theme");

and in your global stylesheet (that is not imported with themeFor ):

vaadin-grid.custom-grid-theme vaadin-grid-cell-content {
  padding: var(--lumo-space-xl);
}