使用react-tabs库时选中标签点击后下方出现白线的问题

使用react-tabs库自定义样式时，遇到一个问题：点击已选中的标签标题，其下方会出现一条白线，点击页面其他位置时该白线消失。

问题截图：

当前使用的CSS代码：

.react-tabs__tab {
   background-color: inherit;
   border: 1px solid #ccc;
   border-radius: 50px;
   cursor: pointer;
   padding: 10px;
}

.react-tabs__tab:hover {
   color: #0099ff;
   transition: 0.3s;
}

.react-tabs__tab--selected {
   color: #0099ff;
   border: 1px solid #0099ff;
   border-bottom: none; /* Updated line */
}

.react-tabs__tab:focus {
   outline: none;
}

.react-tabs__tab:focus:after {
   content: none;
}

问题原因 #

这条白线是标签在焦点状态下的样式残留。虽然已经隐藏了outline和focus伪元素的content，但选中标签的焦点状态下，底部边框样式可能被浏览器或库的默认样式覆盖，导致原本设置的border-bottom: none失效。

解决方法 #

在现有CSS基础上添加以下样式，确保选中标签在焦点状态下依然保持底部边框隐藏：

.react-tabs__tab--selected:focus {
  border-bottom: none;
}

如果上述方法无效，可以进一步覆盖焦点状态下的所有可能影响样式：

.react-tabs__tab--selected:focus {
  border-bottom: none;
  box-shadow: none;
  outline: none;
}

内容的提问来源于stack exchange，提问作者Rayaan R