.btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

这个大纲:没有将工作的按钮和标签

与TS溶液反应

  const btnRef = useRef<HTMLButtonElement | null>(null);
  const handleOnMouseUp = () => {
    btnRef.current?.blur();
  };
  
  <button
    ref={btnRef}
    onClick={handleOnClick}
    onMouseUp={handleOnMouseUp}
  >
    <span className="icon-plus"></span> Add Page
  </button>

我有同样的问题使用<a>作为按钮，我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。

<a type=“巴顿”类=“bmr btn-primary”>释放我!< / a >

虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案)，但从可访问性的角度来看，这种解决方案是糟糕的(例如，参见停止破坏浏览器的默认焦点轮廓)。

另一方面，如果浏览器在你点击按钮后认为它是聚焦的，那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你，OS X上的Chrome)。

那么，我们能做什么呢?我想到了几个选择。

1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})

您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击，我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。

2) CSS: .btn:hover {outline: 0 !important}

在这里，您只关闭悬停按钮的轮廓。显然这不是理想的，但在某些情况下可能足够了。

如果你不想要按钮的轮廓和所有的状态，你可以用下面的代码覆盖css

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus{
  outline: none;
}

这里有两种可能的解决方案。

1.） 按钮类型=“按钮” 类名称=“btn-cart”onClick{（event）=>this.blur（event）}

2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}

这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范，它删除突出显示的部分周围。