如何移除react-bootstrap组件的点击浅蓝色外边框？

我在使用React-Bootstrap的Dropdown组件时，点击组件后图片周围会出现浅蓝色外边框，Button组件也存在同样问题。相关代码如下：

Dropdown组件代码 #

<Dropdown className="my-dropdown p-0 m-0">
  <Dropdown.Toggle className="p-0 m-0" split={false} variant="light-dropdown">
    <Image src="/more@3x.png" style={{ height: '22px' }} />
  </Dropdown.Toggle>
  {/* 下拉菜单内容 */}
</Dropdown>

Button组件代码 #

<Button variant="footer">
  {/* 按钮内容 */}
</Button>

点击后的效果如图所示：

问题原因 #

这个浅蓝色外边框是浏览器为可聚焦元素（比如按钮、下拉触发器）添加的默认outline样式，用于标识元素处于焦点状态，属于浏览器内置的可访问性特性。

解决方法 #

方法1：自定义CSS覆盖焦点样式

通过CSS针对组件的焦点状态修改或移除outline，这是最推荐的维护性方案：

/* 针对Dropdown触发器 */
.my-dropdown .dropdown-toggle:focus {
  outline: none;
  /* 可选：替换为自定义焦点样式，兼顾可访问性 */
  /* box-shadow: 0 0 0 2px rgba(0,123,255,0.25); */
}

/* 针对Button组件（React-Bootstrap会把variant转为btn-{variant}类） */
.btn-footer:focus {
  outline: none;
  /* 自定义焦点样式可选 */
}

方法2：内联样式快速处理（不推荐，不利于统一维护）

直接在组件上添加内联样式移除边框：

<Dropdown.Toggle 
  className="p-0 m-0" 
  split={false} 
  variant="light-dropdown"
  style={{ outline: 'none' }}
>
  <Image src="/more@3x.png" style={{ height: '22px' }} />
</Dropdown.Toggle>

<Button 
  variant="footer"
  style={{ outline: 'none' }}
>
  按钮内容
</Button>

方法3：利用React-Bootstrap内置属性（部分版本支持）

部分React-Bootstrap版本支持通过outline属性直接控制，不过兼容性不如CSS覆盖稳定：

<Button variant="footer" outline={false}>
  按钮内容
</Button>

重要提示 #

完全移除outline会影响键盘导航用户的可访问性，建议替换为其他清晰的焦点样式（比如自定义阴影或边框），确保焦点状态对所有用户可见。

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