如何在react-bootstrap中自定义Tab：选中时下划线+灰色未选中状态

你要实现的是「选中Tab下方仅显示一条下划线，未选中标签呈灰色」的效果，核心问题是要正确覆盖React-Bootstrap Tabs生成的默认类样式，直接styled(Tab)无法定位到内部的.nav-link元素，下面是修改后的完整代码：

import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";
import styled from "styled-components";
import "bootstrap/dist/css/bootstrap.css";

export default function App() {
  const CustomTabs = styled(Tabs)`
    // 移除Tabs默认的底部边框
    border-bottom: none;

    // 全局设置所有未激活Tab的样式
    .nav-link {
      color: gray;
      font-size: 19px;
      border: none; // 清除默认边框
      padding: 0.5rem 1rem 0.3rem; // 调整内边距，让下划线位置更合理
      transition: all 0.2s ease; // 可选：添加切换动画

      // hover状态保持灰色，避免默认样式干扰
      &:hover {
        color: gray;
        border: none;
        background-color: transparent;
      }
    }

    // 选中状态的Tab样式
    .nav-link.active {
      color: black; // 选中时的文字颜色，可替换成需求的orangered
      border-bottom: 3px solid blue; // 选中的下划线
      background-color: transparent; // 清除默认背景色
    }
  `;

  return (
    <div style={{ padding: "20px" }}>
      <CustomTabs defaultActiveKey="tab1" id="uncontrolled-tab-example">
        <Tab eventKey="tab1" title="Tab1">
          Tab1 Content
        </Tab>
        <Tab eventKey="tab2" title="Tab2">
          Tab2 Content
        </Tab>
        <Tab eventKey="tab3" title="Tab3">
          Tab3 Content
        </Tab>
      </CustomTabs>
    </div>
  );
}

关键说明： #

• React-Bootstrap的Tabs会渲染带.nav-tabs的容器，每个Tab对应内部的.nav-link元素，激活时自动添加.active类，所以必须用嵌套选择器在styled(Tabs)里定位这些元素，而不是直接给Tab组件加样式。
• 清除了默认的边框、背景色，避免和自定义样式冲突。
• 调整内边距让下划线位置更贴合文字底部，可选添加过渡动画提升体验。

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