react-bootstrap: Tab 的 tabClassName 属性默认被覆盖

Question

我正在使用 react-bootstrap，特别是 Tabs 和 Tab。 Tab 有一个内置属性 tabClassName，它接受一个字符串。使用说明为"tabClassName is used as className for the associated NavItem"。

所以我设置了<Tab tabClassName="main-tab">.

我的目标是去除当标签被聚焦时出现的蓝色轮廓。但是，下面的 CSS 什么都不做。

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

现场检查如下：

如何去除蓝色焦点轮廓？

Answer 1

我找到了解决方案：

以下 CSS 有效：

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