react-tabs自定义样式失效：切换标签后底部边框消失求助

数据老陈

2026-7-29

解决react-tabs自定义样式底部边框消失问题

问题分析

你的问题和.react-tabs__tab:focus { outline: none; }无关，根源是react-tabs默认的TabList带有底部边框，而你给选中的Tab设置了background: #fff，会覆盖掉TabList的底部边框，切换标签时就会出现边框消失的情况。

修复方案

修改你的SCSS代码，调整TabList和Tab的样式逻辑：

给TabList添加底部边框，统一标签栏的底部样式
调整选中Tab的边框设置，避免覆盖TabList的边框，同时确保选中态的底部高亮边框正常显示

修改后的SCSS代码：

/* 重置TabList默认样式，添加统一底部边框 */
.react-tabs__tab-list {
  border-bottom: 1px solid #ddd;
  margin: 0 0 10px;
  padding: 0;
}

.react-tabs__tab {
  font-family: 'Spoqa Han Sans Neo';
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #999999;
  border: 1px solid transparent;
  border-radius: 5px 5px 0 0;
  padding: 10px 20px 18px;
  cursor: pointer;
  position: relative;
  top: 1px;
}

.react-tabs__tab--selected {
  background: #fff;
  color: #333333;
  border-color: #ddd #ddd transparent;
  border-bottom: 3px solid #075453;
}

/* 可选：移除focus outline，同时保证可访问性 */
.react-tabs__tab:focus {
  outline: none;
}
.react-tabs__tab:focus:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #075453;
}