From 3a964001e9440d757cd79497385012738bfa9b24 Mon Sep 17 00:00:00 2001
From: Wesley <pengyw97@gmail.com>
Date: Wed, 10 May 2023 14:56:46 +0800
Subject: [PATCH] style: fix InputNumber out of range style error (#42250)

* fix: inputNumber out of range style does not take effect

* feat: Add test cases for inputnumber
---
 .../input-number/__tests__/index.test.tsx     | 27 +++++++++++++++++++
 components/input-number/style/index.ts        |  6 +++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/components/input-number/__tests__/index.test.tsx b/components/input-number/__tests__/index.test.tsx
index 6e670602dd..2d52219f8c 100644
--- a/components/input-number/__tests__/index.test.tsx
+++ b/components/input-number/__tests__/index.test.tsx
@@ -5,6 +5,7 @@ import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
+import Button from '../../button';
 
 describe('InputNumber', () => {
   focusTest(InputNumber, { refFocus: true });
@@ -69,4 +70,30 @@ describe('InputNumber', () => {
       container.querySelector('.anticon-arrow-down')?.className.includes('my-class-name'),
     ).toBe(true);
   });
+
+  it('renders correctly when the controlled mode number is out of range', () => {
+    const App: React.FC = () => {
+      const [value, setValue] = React.useState<number | null>(1);
+      return (
+        <>
+          <InputNumber min={1} max={10} value={value} onChange={(v) => setValue(v)} />
+          <Button
+            type="primary"
+            onClick={() => {
+              setValue(99);
+            }}
+          >
+            Reset
+          </Button>
+        </>
+      );
+    };
+    const { container } = render(<App />);
+    fireEvent.click(container.querySelector('button')!);
+    expect(
+      container
+        .querySelector('.ant-input-number')
+        ?.className.includes('ant-input-number-out-of-range'),
+    ).toBe(true);
+  });
 });
diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts
index 8b47461d45..bcfdeefdf0 100644
--- a/components/input-number/style/index.ts
+++ b/components/input-number/style/index.ts
@@ -108,8 +108,10 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 
         // ===================== Out Of Range =====================
         '&-out-of-range': {
-          input: {
-            color: colorError,
+          [`${componentCls}-input-wrap`]: {
+            input: {
+              color: colorError,
+            },
           },
         },