I recently purchased the ExtJS 7.x license and am doing some tests, I ended up finding a flaw (incompatibility) with the Edge and Chrome browsers.
When creating a simple grid type component, selecting the record row does not override the record (row). the record is white and the background is gray. In dark mode, the selected record in black and the background in blue.
How can I solve this problem?
CSS
.x-show-selection > .x-listitem.x-selected {
background-color: #e0e0e0;
background-color: var(--selected-background-color);
color: #111;
color: var(--color);
}
In your example you are setting the colors and override your changes in the next line with the original values. That way you are overriding your changes.
<style>
.x-show-selection > .x-listitem.x-selected {
background-color: red;
color: white;
}
</style>
This should do the trick.
See the index.html in this Fiddle