Valo Grid, can't change get cellStyleGenerator to change cell background co

I can make it right aligned just fine


.v-grid-cell.rightalign {
text-align: right;

and I return “rightalign” as the style.

However if I then try another style to change the background colour of a cell it doesn’t get recognized


.v-grid-cell.percent-80 { background-color: #77FF00; }

Looking in chrome for the computed style, it looks like it is being overridden by

.valo .v-grid-row-stripe > td - #f5f5f5

What’s the best way to get the background colour to change for that cell?

Also on a similar topic, the recommended way to turn off striping? I know I can by changing CSS, just would like the “proper” way, as opposed to me freestyling it and breaking something else later.


Hurrah, worked it out myself

.v-grid .v-grid-cell.percent-80 { background-color: #77FF00; }

is in scope

If anyone knows a better way, do tell, however for the moment I’m going with this.

That’s how it goes, by increasing the specificity of the selectors, as mentioned
. The problem is not terribly common, as the built-in theme rules rarely use very specific selectors, but sometimes they do.