Hi. I have two Grids and I want to style them independently, i.e. different style for different Grid. I know how to style Grid in general, but not how to set e.g. header colour, height, border, etc… differently to two of them.
I added to my View
@CssImport(value = "./styles/my-vaadin-grid-styles.css", themeFor = "vaadin-grid")
nucResourceDetailsGrid.addThemeName("nuc-resource-details-grid");
nucResourceDetailsGrid.addClassName("nuc-resource-details-grid");
and
holdingsGrid.addThemeName("holdings-grid");
holdingsGrid.addClassName("holdings-grid");
and
:host([theme~="nuc-resource-details-grid"]
) [part~="row"]
[selected]
[part~="body-cell"]
:not([part~="details-cell"]
) {
background-color: orange;
}
:host([theme~="holdings-grid"]
) [part~="row"]
[selected]
[part~="body-cell"]
:not([part~="details-cell"]
) {
background-color: purple;
}
:host([theme~="nuc-resource-details-grid"]
)[part~="row"]
:last-child [part~="header-cell"]
, [part~="header-cell"]
:not(:empty):not([details-cell]
) {
padding-top: var(--lumo-space-xs);
padding-bottom: var(--lumo-space-xs);
font-size: var(--lumo-font-size-s);
border-bottom: 1px solid var(--lumo-shade-5pct);
background: #0262AA;
color: white;
}
:host([theme~="holdings-grid"]
)[part~="row"]
:last-child [part~="header-cell"]
, [part~="header-cell"]
:not(:empty):not([details-cell]
) {
padding-top: var(--lumo-space-xs);
padding-bottom: var(--lumo-space-xs);
font-size: var(--lumo-font-size-s);
border-bottom: 1px solid var(--lumo-shade-5pct);
background: red;
color: green;
}
into my-vaadin-grid-styles.css.
Selected background works in both cases, orange vs purple, however header-cell background is red in both cases.
(Vaadin) Could you please suggest what I am working wrong and/or how to achieve this in a proper way with Vaadin 14.1.2.
Big Thanks!