Combining selected row styling and background-image in grid

I want to use my own custom background-image that partly fills the cell, but it seems to also override the selected row background color, and I don’t see why.

Here’s how my grid looks:

image

And here’s part of my styling

.myScreen {}

    && vaadin-grid {
        
        &&::part(requeststatus-greenIcon) {
            background-image: url(icons/green-requeststatus.png);
            background-repeat: no-repeat;
            background-size: auto 70%;
            background-position: center;
        }

The partName is set by a gridCol.setPartNameGenerator

The problem is caused by the fact that selected state uses background-image internally:

BTW same applies to even rows when using row-stripes theme variant.

1 Like

Thanks, that explains it. Now that I know this avenue is closed, it shouldn’t be too hard to just generate a div as cell content and style that instead.