Style grid header

Dear guru,

I want to make my grid header a bit thicker. I added the following styling to the style.css but it does not work. Could you please advice how to do that?

vaadin-grid-cell-content::part(header-cell) {
font-weight: 600 !important;
}

Hi, that selector doesn’t work because the header-cell part belongs to vaadin-grid, not to vaadin-grid-cell-content.

Styling header cell content specifically is unfortunately currently tricky because of the way CSS is split between the cell itself (::part(header-cell)) and the content wrapper inside (vaadin-grid-cell-content), so you’ll have to target both of them by introducing a custom css property (e.g. --header-cell-font-weight):

  --header-cell-font-weight: 600;
}

vaadin-grid-cell-content {
  font-weight: var(--header-cell-font-weight);
}```