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

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);
+  });
 });

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,
+            },
           },
         },