React 18环境下如何自定义Ant Design Tabs组件头部？

不需要依赖已停止维护的react-sticky，以下两个方案都可以稳定实现自定义头部、吸顶效果，且响应式适配成本极低：

• 方案1：原生能力实现（优先推荐，零额外依赖）
  Ant Design的Tabs组件本身就开放了renderTabBar接口用于自定义标签栏，之前官方示例里用react-sticky只是为了实现吸顶效果，完全可以用CSS原生的position: sticky平替，兼容所有现代浏览器，不需要写JS做位置计算，响应式适配直接靠CSS就能完成。
  核心实现代码如下：

  import { Tabs } from 'antd';
  
  export default () => {
    return (
      <Tabs
        renderTabBar={(tabBarProps, DefaultTabBar) => {
          return (
            <div className="custom-tabs-wrap">
              {/* 自定义扩展区：放操作按钮、筛选栏、说明文案都可以 */}
              <div className="custom-tabs-extra">
                <span>自定义头部内容</span>
                <button>新增</button>
              </div>
              {/* 复用ANTD默认的标签栏，保留所有原生交互 */}
              <DefaultTabBar {...tabBarProps} className="sticky-tab-bar" />
            </div>
          )
        }}
        items={[
          { key: '1', label: '标签页1', children: <div>标签页1内容</div> },
          { key: '2', label: '标签页2', children: <div>标签页2内容</div> },
          { key: '3', label: '标签页3', children: <div>标签页3内容</div> },
        ]}
      />
    )
  }
  

  配套样式：

  .custom-tabs-wrap {
    background: #fff;
    z-index: 10;
  }
  .custom-tabs-extra {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  .sticky-tab-bar {
    position: sticky;
    /* 吸顶位置，页面有固定头部导航的话改成对应导航高度即可 */
    top: 0;
    margin: 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  }
  /* 响应式适配直接写媒体查询，不需要额外JS逻辑 */
  @media (max-width: 768px) {
    .custom-tabs-extra {
      padding: 8px 12px;
    }
    .sticky-tab-bar {
      top: 56px;
    }
  }
  

  这个方案不会破坏Tabs的原生交互，包括标签溢出滚动、下拉选择、键盘导航、可拖拽等能力都能正常用，不会出现滚动抖动、定位偏移的问题。

• 方案2：复杂交互场景用React 18兼容的轻量hooks库
  如果需要实现滚动到特定阈值才吸顶、吸顶时动态切换样式这类更复杂的效果，可以用支持React 18的轻量钩子库替代react-sticky，比如react-use自带的useSticky钩子、@react-hook/sticky，这类库都是基于React Hooks实现，体积小无兼容问题，只要给自定义TabBar容器绑定对应ref即可，不需要改动整体结构。

• 常见避坑点

  1. 不要完全重写TabBar逻辑，直接复用renderTabBar回调里传入的DefaultTabBar组件，能省去大量交互、适配、无障碍相关的开发量
  2. 如果sticky吸顶不生效，检查外层父元素是否设置了overflow: hidden/auto/scroll属性，sticky定位只会相对最近的可滚动祖先元素生效，要相对视口吸顶就确保外层父元素没有设置overflow相关属性

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