From f41a0457594bd46f14f16f79d249231510a45285 Mon Sep 17 00:00:00 2001
From: ice <1597834867@qq.com>
Date: Wed, 24 Sep 2025 15:56:54 +0800
Subject: [PATCH 1/3] feat: add 'close' semantic name and update TabNode styles
 and classNames

---
 src/TabNavList/TabNode.tsx | 16 +++++++++-------
 src/TabNavList/index.tsx   | 12 +++++++++---
 src/Tabs.tsx               |  2 +-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
index 8e076898..2946d2ca 100644
--- a/src/TabNavList/TabNode.tsx
+++ b/src/TabNavList/TabNode.tsx
@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import * as React from 'react';
 import type { EditableConfig, Tab } from '../interface';
 import { genDataNodeKey, getRemovable } from '../util';
+import type { SemanticName } from '@/Tabs';
 
 export interface TabNodeProps {
   id: string;
@@ -23,8 +24,8 @@ export interface TabNodeProps {
   onMouseUp: React.MouseEventHandler;
   onFocus: React.FocusEventHandler;
   onBlur: React.FocusEventHandler;
-  style?: React.CSSProperties;
-  className?: string;
+  styles?: Pick<Record<SemanticName, React.CSSProperties>, 'item' | 'close'>;
+  classNames?: Pick<Record<SemanticName, string>, 'item' | 'close'>;
 }
 
 const TabNode: React.FC<TabNodeProps> = props => {
@@ -44,8 +45,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
     onKeyDown,
     onMouseDown,
     onMouseUp,
-    style,
-    className,
+    styles,
+    classNames: tabNodeClassNames,
     tabCount,
     currentPosition,
   } = props;
@@ -83,13 +84,13 @@ const TabNode: React.FC<TabNodeProps> = props => {
     <div
       key={key}
       data-node-key={genDataNodeKey(key)}
-      className={clsx(tabPrefix, className, {
+      className={clsx(tabPrefix, tabNodeClassNames?.item, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,
         [`${tabPrefix}-disabled`]: disabled,
         [`${tabPrefix}-focus`]: focus,
       })}
-      style={style}
+      style={styles?.item}
       onClick={onInternalClick}
     >
       {/* Primary Tab Button */}
@@ -130,7 +131,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
           type="button"
           aria-label={removeAriaLabel || 'remove'}
           tabIndex={active ? 0 : -1}
-          className={`${tabPrefix}-remove`}
+          className={clsx(`${tabPrefix}-remove`, tabNodeClassNames?.close)}
+          style={styles?.close}
           onClick={e => {
             e.stopPropagation();
             onRemoveTab(e);
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 39ea7cac..1a9f4254 100644
--- a/src/TabNavList/index.tsx
+++ b/src/TabNavList/index.tsx
@@ -435,9 +435,15 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
         prefixCls={prefixCls}
         key={key}
         tab={tab}
-        className={tabsClassNames?.item}
-        /* first node should not have margin left */
-        style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }}
+        classNames={{
+          item: tabsClassNames?.item,
+          close: tabsClassNames?.close,
+        }}
+        styles={{
+          /* first node should not have margin left */
+          item: i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item },
+          close: styles?.close,
+        }}
         closable={tab.closable}
         editable={editable}
         active={key === activeKey}
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index 2dce753a..e90d9a0c 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -35,7 +35,7 @@ import type {
 // Used for accessibility
 let uuid = 0;
 
-export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header';
+export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'close';
 
 export interface TabsProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {

From ffc86fd153253aec1b271f6d065f1bf2323ba3fe Mon Sep 17 00:00:00 2001
From: ice <1597834867@qq.com>
Date: Wed, 24 Sep 2025 16:12:12 +0800
Subject: [PATCH 2/3] types: update TabNode styles and classNames to use
 Partial type for better flexibility

---
 src/TabNavList/TabNode.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
index 2946d2ca..1ee1e049 100644
--- a/src/TabNavList/TabNode.tsx
+++ b/src/TabNavList/TabNode.tsx
@@ -24,8 +24,8 @@ export interface TabNodeProps {
   onMouseUp: React.MouseEventHandler;
   onFocus: React.FocusEventHandler;
   onBlur: React.FocusEventHandler;
-  styles?: Pick<Record<SemanticName, React.CSSProperties>, 'item' | 'close'>;
-  classNames?: Pick<Record<SemanticName, string>, 'item' | 'close'>;
+  styles?: Pick<Partial<Record<SemanticName, React.CSSProperties>>, 'item' | 'close'>;
+  classNames?: Pick<Partial<Record<SemanticName, string>>, 'item' | 'close'>;
 }
 
 const TabNode: React.FC<TabNodeProps> = props => {

From f0f7e8c523e827af3b245639dfc06c66cec8551d Mon Sep 17 00:00:00 2001
From: ice <1597834867@qq.com>
Date: Wed, 24 Sep 2025 17:03:46 +0800
Subject: [PATCH 3/3] test: add unit test for editable Tabs component with
 custom classNames and styles

---
 tests/index.test.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 606b4cfe..04948f41 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -775,4 +775,28 @@ describe('Tabs.Basic', () => {
     expect(content).toHaveStyle({ background: 'green' });
     expect(header).toHaveStyle({ background: 'yellow' });
   });
+
+  it('support classnames and styles for editable', () => {
+    const customClassNames = {
+      close: 'custom-close',
+    };
+    const customStyles = {
+      close: { background: 'red' },
+    };
+
+    const { container } = render(
+      <Tabs
+        editable={{
+          onEdit: () => {},
+        }}
+        tabPosition="left"
+        items={[{ key: 'test', label: 'test', icon: 'test' }]}
+        styles={customStyles}
+        classNames={customClassNames}
+      />,
+    );
+
+    expect(container.querySelector('.rc-tabs-tab-remove')).toHaveClass('custom-close');
+    expect(container.querySelector('.rc-tabs-tab-remove')).toHaveStyle({ background: 'red' });
+  });
 });