如何覆盖React Bootstrap激活Tab的默认边框样式

要覆盖Bootstrap默认的Tabs激活态边框样式，核心是提高自定义选择器的权重，同时注意默认样式实际作用的标签（是<a>而非<li>）。以下是具体实现方式：

问题原因 #

你之前的写法无效，主要两个原因：

• Bootstrap默认样式选择器.nav-tabs > li.active > a的权重高于你的.customTabs li.active，导致自定义样式被覆盖；
• 默认边框样式是定义在激活态Tab的<a>标签上，而非<li>标签，所以选择<li>不会生效。

解决方案 #

使用更高权重的选择器，结合React Bootstrap自动添加的.nav-tabs类，直接定位到激活态的<a>标签：

Sass代码示例 #

/* 覆盖激活态Tab的边框样式 */
.customTabs.nav-tabs > li.active > a {
  border-width: 2px; /* 调整边框宽度 */
  border-color: blue blue transparent blue; /* 上、左、右边框为蓝色，底部透明（和内容区衔接） */
  border-radius: 4px 4px 0 0; /* 可选：保持顶部圆角 */
}

/* 可选：修改Tab hover状态的边框 */
.customTabs.nav-tabs > li > a:hover {
  border-color: blue;
}

说明 #

• .customTabs.nav-tabs同时结合了自定义类和Bootstrap默认类，大幅提高选择器权重，确保能覆盖默认样式；
• border-color的第四个值设为transparent是为了和下方内容区域的边框衔接，避免出现双重边框，可根据你的设计需求调整；
• 不推荐使用!important，会增加样式维护成本，通过权重覆盖是更规范的方式。

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