ExtJS 6 Theme-Triton中修改所有元素聚焦边框颜色的方法

当然可以！在ExtJS 6的Theme-Triton主题下，你完全可以通过自定义CSS来全局替换默认的蓝色聚焦边框/阴影为红色。下面是具体的实现步骤和代码：

• 首先，明确Triton主题中控制聚焦状态的核心CSS类：x-focus是全局通用的聚焦类，大部分ExtJS组件在获得焦点时都会自动添加这个类；部分表单组件可能还会用到x-form-focus或x-form-field-focus这类细分的聚焦类。

• 编写全局覆盖的CSS代码：将以下代码放到你的应用自定义CSS文件中（注意要确保这个文件在ExtJS主题CSS之后加载，这样才能保证样式优先级足够）：

/* 全局覆盖所有元素的聚焦边框与阴影颜色 */
.x-focus {
    border-color: #ff0000;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
}

/* 补充覆盖表单组件的聚焦样式 */
.x-form-focus, .x-form-field-focus {
    border-color: #ff0000;
    box-shadow: 0 0 3px rgba(255, 0, 0, 0.5);
}

• 优先级调整技巧：如果发现样式没有生效，大概率是ExtJS组件的内置CSS优先级更高。这时候你有两种选择：

  • 使用!important强制覆盖属性（适合快速验证）：

    .x-focus {
        border-color: #ff0000 !important;
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.7) !important;
    }
    

  • 提升选择器优先级（更规范的做法，避免!important的滥用）：比如加上应用根容器的类名或者body前缀：

    body .x-focus {
        border-color: #ff0000;
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
    }
    

• 特殊组件处理：个别组件可能使用outline而非border来展示聚焦状态，这时候需要额外补充以下规则：

.x-focus {
    outline-color: #ff0000 !important;
}

这样修改后，所有组件在获得焦点时的边框/阴影就会变成你想要的红色了。如果遇到个别组件样式没生效，可以通过浏览器开发者工具查看该组件的聚焦类，针对性补充CSS规则即可。

内容的提问来源于stack exchange，提问作者harunB10