ExtJS 7.x Modern Material css “.x-show-selection> .x-listitem.x-selected” 在 Edge 和 Chrome 浏览器中的错误

Question

我最近购买了 ExtJS 7.x 许可证并正在做一些测试，我最终发现了 Edge 和 Chrome 浏览器的缺陷（不兼容）。

创建简单的网格类型组件时，选择记录行不会覆盖记录（行）。记录是白色的，背景是灰色的。深色模式下，选中的记录为黑色，背景为蓝色。

我该如何解决这个问题？

CSS
.x-show-selection > .x-listitem.x-selected {
    background-color: #e0e0e0;
    background-color: var(--selected-background-color);
    color: #111;
    color: var(--color);
}

Edge - BUG on Grid record selection

Edge - BUG on Grid Dark Mode Record selection

Answer 1

在您的示例中，您正在设置颜色并使用原始值覆盖下一行中的更改。这样您就可以覆盖您的更改。

<style>
    .x-show-selection > .x-listitem.x-selected {
        background-color: red;
        color: white;
    }
</style>

这应该可以解决问题。

见index.htmlFiddle

ExtJS 7.x Modern Material css “.x-show-selection> .x-listitem.x-selected” 在 Edge 和 Chrome 浏览器中的错误

Bug in ExtJS 7.x Modern Material css ".x-show-selection> .x-listitem.x-selected" in Edge and Chrome browsers

css

extjs

extjs-grid

extjs7