diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx
index def12570..ded64f3d 100644
--- a/src/TabNavList/OperationNode.tsx
+++ b/src/TabNavList/OperationNode.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
 import { getRemovable } from '../util';
 import AddButton from './AddButton';
+import type { SemanticName } from '../Tabs';
 
 export interface OperationNodeProps {
   prefixCls: string;
@@ -26,7 +27,8 @@ export interface OperationNodeProps {
   tabMoving?: boolean;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   popupClassName?: string;
-  popupStyle?: React.CSSProperties;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((props, ref) => {
@@ -46,7 +48,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     onTabClick,
     getPopupContainer,
     popupClassName,
-    popupStyle,
+    classNames,
+    styles,
   } = props;
   // ======================== Dropdown ========================
   const [open, setOpen] = useState(false);
@@ -98,7 +101,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
                 type="button"
                 aria-label={removeAriaLabel || 'remove'}
                 tabIndex={0}
-                className={`${dropdownPrefix}-menu-item-remove`}
+                className={clsx(`${dropdownPrefix}-menu-item-remove`, classNames?.close)}
+                style={styles?.close}
                 onClick={e => {
                   e.stopPropagation();
                   onRemoveTab(e, key);
@@ -167,7 +171,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     if (ele && ele.scrollIntoView) {
       ele.scrollIntoView(false);
     }
-  }, [selectedKey]);
+  }, [selectedItemId, selectedKey]);
 
   useEffect(() => {
     if (!open) {
@@ -193,7 +197,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
       visible={tabs.length ? open : false}
       onVisibleChange={setOpen}
       overlayClassName={overlayClassName}
-      overlayStyle={popupStyle}
+      overlayStyle={styles?.popup}
       mouseEnterDelay={0.1}
       mouseLeaveDelay={0.1}
       getPopupContainer={getPopupContainer}
diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
index 8e076898..5f217913 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;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 const TabNode: React.FC<TabNodeProps> = props => {
@@ -44,8 +45,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
     onKeyDown,
     onMouseDown,
     onMouseUp,
-    style,
-    className,
+    classNames,
+    styles,
     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, classNames?.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`, classNames?.close)}
+          style={styles?.close}
           onClick={e => {
             e.stopPropagation();
             onRemoveTab(e);
@@ -142,7 +144,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
     </div>
   );
 
-  return renderWrapper ? renderWrapper(node) : node;
+  return typeof renderWrapper === 'function' ? renderWrapper(node) : node;
 };
 
 export default TabNode;
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 39ea7cac..cdd4cd2e 100644
--- a/src/TabNavList/index.tsx
+++ b/src/TabNavList/index.tsx
@@ -435,9 +435,11 @@ 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={tabsClassNames}
+        styles={{
+          ...styles,
+          item: i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item },
+        }}
         closable={tab.closable}
         editable={editable}
         active={key === activeKey}
@@ -640,9 +642,12 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
           ref={operationsRef}
           prefixCls={prefixCls}
           tabs={hiddenTabs}
-          className={!hasDropdown && operationsHiddenClassName}
-          popupStyle={styles?.popup}
+          className={clsx({
+            [operationsHiddenClassName]: !hasDropdown,
+          })}
           tabMoving={!!lockAnimation}
+          classNames={tabsClassNames}
+          styles={styles}
         />
 
         <ExtraContent ref={extraRightRef} position="right" extra={extra} prefixCls={prefixCls} />
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'> {