反应选项卡库中选定选项卡标题下出现白线

Question

我正在使用

react-tabs

library 并且已应用自定义样式，但我遇到一个问题，即单击时所选选项卡标题下方会出现一条白线。奇怪的是，当我单击页面上的其他位置时，该线消失了。

Codesandbox 链接

下面是选项卡的 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;
}

Answer 1

.react-tabs__tab:focus:after { background: transparent; }

；）