Theming - remove odd/even row background

Questions
1

I switched to the 17.1.0 version from a prior one that didn’t need theming. In my project I use multiple classes to highlight different cells based on a set of conditions. However, the CSS odd/even row background overrides them all because of higher CSS specificity. Is there a way to remove the odd/even classes from the elements or ignore them in CSS so the highlight rules are not overwritten? I know I could just modify my CSS to increase the specificity, but there are a fair amount of classes and I was wondering if there is something easier.

2

Hi @rslite , In v17 the themes paint odd/even row backgrounds through CSS custom properties:

.handsontable tr.ht__row_odd td  { background-color: var(--ht-row-cell-odd-background-color); }
.handsontable tr.ht__row_even td { background-color: var(--ht-row-cell-even-background-color); }

These classes are added by the table render, and there isn’t a way to remove them. But you can override these variables, instead of trying to override the background-color directly.

.my-highlight {
  --ht-row-cell-odd-background-color:  #fff3a8;
  --ht-row-cell-even-background-color: #fff3a8;
}

.my-error {
  --ht-row-cell-odd-background-color:  #ffd6d6;
  --ht-row-cell-even-background-color: #ffd6d6;
}
3

Thank you for the reply! I didn’t think of that :slight_smile:. I’ll keep that in mind if I encounter a similar situation; however, for this one I ended up with a different way of dealing with it - I just use JS to remove the CSS rules when the page is loaded. Didn’t even know that was possible, so I ended up learning something.

1 Like