如何在ExtReact中阻止按钮显示菜单时的环形点击效果

这个环形效果其实是按钮获得焦点时的焦点环（focus ring），主要是为了提升键盘导航的可访问性，但如果你的业务场景确实不需要它，有两种实用的解决方式：

方法一：利用组件自带属性控制 #

ExtReact的Button组件提供了直接控制焦点样式的配置项，你可以根据需求选择：

• 设置focusable: false：完全禁用按钮的焦点能力，点击后就不会触发环形焦点样式。但要注意，这会影响键盘用户的导航体验，仅适合非核心交互按钮使用：

  <Button text="操作按钮" focusable={false} menu={yourMenu} />
  

• 自定义focusCls属性：指定一个空的CSS类名，覆盖默认的焦点样式类，这种方式不会破坏可访问性：

  <Button text="操作按钮" focusCls="" menu={yourMenu} />
  

方法二：通过CSS覆盖默认样式 #

如果需要批量处理多个按钮，或者更灵活地调整样式，可以编写CSS移除焦点环：

/* 全局移除所有Ext按钮的焦点环 */
.x-btn:focus, .x-btn-focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 仅针对特定类的按钮生效 */
.no-focus-btn.x-btn:focus {
    outline: none;
    box-shadow: none;
}

然后给目标按钮添加自定义类即可：

<Button text="操作按钮" cls="no-focus-btn" menu={yourMenu} />

小提醒：除非有明确的场景需求，否则不建议完全移除焦点环——它对依赖键盘导航的用户至关重要。如果只是觉得默认样式不好看，也可以通过自定义focusCls对应的CSS来替换成更符合你UI风格的焦点效果。

内容的提问来源于stack exchange，提问作者Милош Рајковић