From b119de6a116520a23a5333a4c975a27413e3fe3f 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 18:52:51 +0800
Subject: [PATCH] fix: forward textarea semantic styles and correct typings

---
 package.json                            |  2 +-
 src/TextArea.tsx                        |  1 +
 src/interface.ts                        |  2 +-
 tests/__snapshots__/index.spec.tsx.snap | 36 ++++++++++++++++++++++---
 tests/index.spec.tsx                    | 18 +++++++++++++
 5 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index ebf22e1..d8fb16c 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "coverage": "rc-test --coverage"
   },
   "dependencies": {
-    "@rc-component/input": "~1.2.0",
+    "@rc-component/input": "~1.2.1",
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1"
diff --git a/src/TextArea.tsx b/src/TextArea.tsx
index af2e233..5158dab 100644
--- a/src/TextArea.tsx
+++ b/src/TextArea.tsx
@@ -236,6 +236,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
             'data-count': typeof dataCount === 'string' ? dataCount : undefined,
           },
         }}
+        styles={styles}
         hidden={hidden}
         readOnly={readOnly}
         onClear={onClear}
diff --git a/src/interface.ts b/src/interface.ts
index 476d49a..bd62e32 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -31,7 +31,7 @@ export type TextAreaProps = Omit<HTMLTextareaProps, 'onResize' | 'value'> & {
     textarea?: string;
     count?: string;
   };
-  styles?: {
+  styles?: CommonInputProps['styles'] & {
     textarea?: CSSProperties;
     count?: CSSProperties;
   };
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index 2e02281..7a5a108 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -2,10 +2,38 @@
 
 exports[`TextArea classNames and styles should work 1`] = `
 <div>
-  <textarea
-    class="rc-textarea custom-textarea custom-class"
-    style="color: red; background: red;"
-  />
+  <span
+    class="rc-textarea-affix-wrapper rc-textarea-affix-wrapper-input-with-clear-btn rc-textarea-show-count rc-textarea-textarea-allow-clear custom-class"
+    data-count="3"
+    style="background: red;"
+  >
+    <textarea
+      class="rc-textarea custom-textarea"
+      style="color: red;"
+    >
+      123
+    </textarea>
+    <span
+      class="rc-textarea-suffix custom-suffix"
+      style="color: yellow;"
+    >
+      <button
+        class="rc-textarea-clear-icon rc-textarea-clear-icon-has-suffix custom-clear"
+        style="color: orange;"
+        tabindex="-1"
+        type="button"
+      >
+        ✖
+      </button>
+      suffix
+      <span
+        class="rc-textarea-data-count custom-count"
+        style="color: blue;"
+      >
+        3
+      </span>
+    </span>
+  </span>
   <span
     class="rc-textarea-affix-wrapper rc-textarea-show-count custom-class"
     data-count="0"
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index ff59503..9838936 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -315,16 +315,28 @@ describe('TextArea', () => {
     const { container } = render(
       <>
         <TextArea
+          value="123"
+          showCount
+          suffix="suffix"
+          allowClear
           className="custom-class"
           style={{ background: 'red' }}
           classNames={{
             textarea: 'custom-textarea',
+            suffix: 'custom-suffix',
+            clear: 'custom-clear',
             count: 'custom-count',
           }}
           styles={{
             textarea: {
               color: 'red',
             },
+            suffix: {
+              color: 'yellow',
+            },
+            clear: {
+              color: 'orange',
+            },
             count: {
               color: 'blue',
             },
@@ -349,6 +361,12 @@ describe('TextArea', () => {
         />
       </>,
     );
+    expect(container.querySelector('.rc-textarea-clear-icon')).toHaveClass(
+      'custom-clear',
+    );
+    expect(container.querySelector('.rc-textarea-clear-icon')).toHaveStyle({
+      color: 'orange',
+    });
     expect(container).toMatchSnapshot();
   });