Styling GroupTable's groupRow and TableCell

I am trying Styling the group row and GroupTableCell as follows but no result!

In styles.scss

.v-table-row.background-blue {
    background-color: blue;
    color: white;
}

.v-table-row.background-green {
    background-color: green;
    color: white;
}

.v-table-row.background-yellow {
    background-color: yellow;
    color: white;
}

.v-table-row.background-red {
    background-color: red;
    color: white;
}

in controller:

//To Style the Group Row and Table Cell
private void initTableStyle() {
    vendorAuditLineGroupTable.setStyleProvider(new GroupTable.GroupStyleProvider<VendorAuditLine>() {
        @Override
        public String getStyleName(VendorAuditLine entity, @Nullable String property) {
            return null;
        }

        @Nullable
        @Override
        public String getStyleName(GroupInfo info) {
            //return "group-line-style";
            return "background-blue";
        }
    });

    vendorAuditLineGroupTable.addStyleProvider((entity, property) -> {
        if ("auditFinding".equals(property)) {
            if (entity.getAuditFinding().equals(AuditFinding.COMPLIANT)) {
                return "background-green";
            }else if (entity.getAuditFinding().equals(AuditFinding.MINOR_NC)) {
                return "background-yellow";
            }else if (entity.getAuditFinding().equals(AuditFinding.MAJOR_NC)) {
                return "background-red";
            }
        }
        return null;
    });
}

The first to style the group rows worked partially as follows:
Alternate row colour, this might be default styling…
26%20PM

but in my case, I want all group rows to be colored as follows:
20%20PM

Hi,

Check CSS Specificity documentation. You will need to set more specific CSS rule or use !important modifier.