From 1fc89ae56c4f3dd24b6a9660133e9e413ed57267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Tue, 17 Mar 2026 17:34:55 +0800
Subject: [PATCH] feat: support semantic classNames and styles for clear

---
 src/BaseInput.tsx                       | 13 +++++++++----
 src/interface.ts                        |  2 ++
 tests/BaseInput.test.tsx                | 11 ++++++++++-
 tests/__snapshots__/index.test.tsx.snap | 10 +++++++++-
 tests/index.test.tsx                    |  9 +++++++++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index 3bca08b..2942d44 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -96,10 +96,15 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
           // Do not trigger onBlur when clear input
           // https://github.com/ant-design/ant-design/issues/31200
           onMouseDown={(e) => e.preventDefault()}
-          className={clsx(clearIconCls, {
-            [`${clearIconCls}-hidden`]: !needClear,
-            [`${clearIconCls}-has-suffix`]: !!suffix,
-          })}
+          className={clsx(
+            clearIconCls,
+            {
+              [`${clearIconCls}-hidden`]: !needClear,
+              [`${clearIconCls}-has-suffix`]: !!suffix,
+            },
+            classNames?.clear,
+          )}
+          style={styles?.clear}
         >
           {iconNode}
         </button>
diff --git a/src/interface.ts b/src/interface.ts
index 1b142dc..491d70c 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -24,6 +24,7 @@ export interface CommonInputProps {
     affixWrapper?: string;
     prefix?: string;
     suffix?: string;
+    clear?: string;
     groupWrapper?: string;
     wrapper?: string;
     variant?: string;
@@ -32,6 +33,7 @@ export interface CommonInputProps {
     affixWrapper?: CSSProperties;
     prefix?: CSSProperties;
     suffix?: CSSProperties;
+    clear?: CSSProperties;
   };
   allowClear?: boolean | { disabled?: boolean; clearIcon?: ReactNode };
 }
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index 8a237e9..02f7be0 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -236,6 +236,7 @@ describe('BaseInput', () => {
         prefixCls="rc-input"
         prefix="prefix"
         addonBefore="addon"
+        allowClear
         styles={{
           affixWrapper: {
             color: 'red',
@@ -243,9 +244,12 @@ describe('BaseInput', () => {
           prefix: {
             color: 'blue',
           },
+          clear: {
+            color: 'green',
+          },
         }}
       >
-        <input />
+        <input defaultValue="test" />
       </BaseInput>,
     );
 
@@ -258,6 +262,11 @@ describe('BaseInput', () => {
       container.container.querySelector<HTMLSpanElement>('.rc-input-prefix')
         ?.style.color,
     ).toBe('blue');
+    expect(
+      container.container.querySelector('.rc-input-clear-icon'),
+    ).toHaveStyle({
+      color: 'green',
+    });
   });
 
   it('with addon and disabled', () => {
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 72bc563..69e81b2 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Input allowClear classNames and styles should work 1`] = `
 <div>
   <span
-    class="rc-input-affix-wrapper custom-class"
+    class="rc-input-affix-wrapper rc-input-affix-wrapper-input-with-clear-btn custom-class"
     style="background-color: red;"
   >
     <span
@@ -22,6 +22,14 @@ exports[`Input allowClear classNames and styles should work 1`] = `
       class="rc-input-suffix custom-suffix"
       style="color: yellow;"
     >
+      <button
+        class="rc-input-clear-icon rc-input-clear-icon-has-suffix custom-clear"
+        style="color: orange;"
+        tabindex="-1"
+        type="button"
+      >
+        ✖
+      </button>
       <span
         class="rc-input-show-count-suffix rc-input-show-count-has-suffix custom-count"
         style="color: green;"
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index a27875d..5b480c6 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -298,18 +298,21 @@ describe('Input allowClear', () => {
           prefixCls="rc-input"
           prefix="prefix"
           suffix="suffix"
+          allowClear
           className="custom-class"
           style={{ backgroundColor: 'red' }}
           classNames={{
             input: 'custom-input',
             prefix: 'custom-prefix',
             suffix: 'custom-suffix',
+            clear: 'custom-clear',
             count: 'custom-count',
           }}
           styles={{
             input: { color: 'red' },
             prefix: { color: 'blue' },
             suffix: { color: 'yellow' },
+            clear: { color: 'orange' },
             count: { color: 'green' },
           }}
         />
@@ -362,6 +365,12 @@ describe('Input allowClear', () => {
         />
       </>,
     );
+    expect(container.querySelector('.rc-input-clear-icon')).toHaveClass(
+      'custom-clear',
+    );
+    expect(container.querySelector('.rc-input-clear-icon')).toHaveStyle({
+      color: 'orange',
+    });
     expect(container).toMatchSnapshot();
   });
 });