如何替换antd库Tabs组件的默认新增按钮为自定义版本

• 第一步：添加全局CSS隐藏默认自带的新增按钮

.ant-tabs-new-tab {
  display: none !important;
}

• 第二步：给Tabs组件添加tabBarExtraContent属性，传入自定义的新增按钮，直接绑定你的新增标签逻辑即可

修改后的代码示例：

<Tabs 
  onChange={tabOnChange}
  activeKey={activeKey}
  type="editable-card"
  onEdit={tabOnEdit}
  // 新增tabBarExtraContent属性，传入自定义按钮
  tabBarExtraContent={<button onClick={你自己的新增标签处理方法}>自定义新增</button>}
>
    {panes.map(pane => (
      <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
        {pane.content}
      </TabPane>
    ))}
</Tabs>

补充说明 #

tabBarExtraContent 默认渲染在标签栏的最右侧，和原默认新增按钮的位置完全匹配，不需要额外调整样式。如果你的业务场景需要把新增按钮放在其他位置，只需要保留隐藏默认按钮的CSS，把自定义按钮放在你需要的任意位置，绑定新增逻辑即可。原有onEdit事件可继续保留，用来处理标签关闭逻辑，不会受影响。

内容的提问来源于stack exchange，提问作者Nguyen Khac Sam