CSS如何解决React Tab标签切换时相邻边框重叠显示异常问题

解决方案 #

你可以通过调整CSS的边距和层级解决边框重叠问题，核心逻辑是让相邻标签的边框先完全重叠，再让激活态的边框层级高于普通标签，保证重叠位置显示黑色激活边框。
具体修改styles.css即可：

.App {
  font-family: sans-serif;
  text-align: center;
}

.tab {
  display: flex;
}
.tab .tab__item {
  flex: 1 1 0;
  border: 1px solid #c3c4c7;
  padding: 0.1rem 0.2rem;
  /* 新增负左边距，让相邻标签的边框完全重叠 */
  margin-left: -1px;
}

.tab .tab__item--active {
  border: 1px solid #3c434a;
  /* 新增相对定位和更高层级，让激活态边框覆盖普通标签的灰色边框 */
  position: relative;
  z-index: 1;
}

.tab .tab__item:hover {
  cursor: pointer;
}

该方案支持任意数量的标签场景，无需修改JS逻辑。

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