Css react引导：选项卡'；默认情况下会覆盖tabClassName属性

我使用的是react引导，特别是Tab和Tab。Tab有一个内置属性，该属性接受字符串。使用说明为“tabClassName用作关联NaviItem的类名”

所以我设置了

我的目标是删除选项卡聚焦时出现的蓝色轮廓。但是，下面的CSS没有任何作用

.main-tab, .main-tab:active, .main-tab:focus {
    outline: none !important;
}

以下是现场检查：

如何摆脱蓝色焦点轮廓？

我找到了解决方案：

以下CSS工作：

.main-tab > a,
.main-tab > a:focus {
    outline: none;
}

---

这是一个坏主意，而且违背了最佳实践。出于可访问性的目的，您应该尽量避免弄乱浏览器的默认焦点轮廓/样式。谢谢你的反馈。您认为下面的解决方案如何？我建议您不要这样做，因为像Bootstrap这样的框架会保留焦点样式，这是有原因的。它会删除大纲，但大纲对于使用键盘（因为他们不能使用鼠标）的人来说很重要，因为他们可以确定自己在页面上的导航位置。如果不喜欢浏览器默认样式，则需要定义自己的.Noted。谢谢你告诉我，我没有意识到。