diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index 798f0bfde3..375e8591ea 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -14,6 +14,7 @@ import {
   InputStatus,
   getMergedStatus,
 } from '../_util/statusUtils';
+import useStyle from './style';
 
 type ValueType = string | number;
 
@@ -52,6 +53,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   } = props;
 
   const prefixCls = getPrefixCls('input-number', customizePrefixCls);
+
+  // Style
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
   let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
   let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
   const controlsTemp = typeof controls === 'boolean' ? controls : undefined;
@@ -84,6 +89,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       [`${prefixCls}-borderless`]: !bordered,
     },
     getStatusClassNames(prefixCls, mergedStatus),
+    hashId,
     className,
   );
 
@@ -115,6 +121,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
         // className will go to addon wrapper
         [`${className}`]: !(addonBefore || addonAfter) && className,
       },
+      hashId,
     );
 
     element = (
@@ -151,7 +158,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     ) : null;
     const addonAfterNode = addonAfter ? <div className={addonClassName}>{addonAfter}</div> : null;
 
-    const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, {
+    const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, hashId, {
       [`${wrapperClassName}-rtl`]: direction === 'rtl',
     });
 
@@ -163,6 +170,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
         [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
       },
       getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),
+      hashId,
       className,
     );
     element = (
@@ -176,7 +184,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     );
   }
 
-  return element;
+  return wrapSSR(element);
 });
 
 export default InputNumber as (<T extends ValueType = ValueType>(
diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
index 97662c0c8a..479a393267 100644
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@@ -1,235 +1,235 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import '../../input/style/mixin';
-@import './affix';
-@import './status';
-
-@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
-@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
-
-.@{input-number-prefix-cls} {
-  .reset-component();
-  .input();
-
-  //== Style for input-group: input with label, with button or dropdown...
-  &-group {
-    .reset-component();
-    .input-group(~'@{input-number-prefix-cls}');
-
-    &-wrapper {
-      display: inline-block;
-      text-align: start;
-      vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
-    }
-  }
-
-  display: inline-block;
-  width: 90px;
-  margin: 0;
-  padding: 0;
-  border: @border-width-base @border-style-base @border-color-base;
-  border-radius: @border-radius-base;
-
-  &-handler {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 50%;
-    overflow: hidden;
-    color: @text-color-secondary;
-    font-weight: bold;
-    line-height: 0;
-    text-align: center;
-    border-left: @border-width-base @border-style-base @input-number-handler-border-color;
-    transition: all 0.1s linear;
-
-    &:active {
-      background: @input-number-handler-active-bg;
-    }
-
-    &:hover &-up-inner,
-    &:hover &-down-inner {
-      color: @input-number-handler-hover-bg;
-    }
-  }
-
-  &-handler-up-inner,
-  &-handler-down-inner {
-    .iconfont-mixin();
-
-    position: absolute;
-    right: 4px;
-    width: 12px;
-    height: 12px;
-    color: @text-color-secondary;
-    line-height: 12px;
-    transition: all 0.1s linear;
-    user-select: none;
-  }
-
-  &:hover {
-    .hover(@input-number-hover-border-color);
-    & + .@{form-item-prefix-cls}-children-icon {
-      opacity: 0;
-      transition: opacity 0.24s linear 0.24s;
-    }
-  }
-
-  &-focused {
-    .active();
-  }
-
-  &-disabled {
-    .disabled();
-    .@{input-number-prefix-cls}-input {
-      cursor: not-allowed;
-    }
-    .@{input-number-prefix-cls}-handler-wrap {
-      display: none;
-    }
-  }
-
-  &-readonly {
-    .@{input-number-prefix-cls}-handler-wrap {
-      display: none;
-    }
-  }
-
-  &-input {
-    width: 100%;
-    height: @input-height-base - 2px;
-    padding: 0 @control-padding-horizontal - 1px;
-    text-align: left;
-    background-color: transparent;
-    border: 0;
-    border-radius: @border-radius-base;
-    outline: 0;
-    transition: all 0.3s linear;
-    appearance: textfield !important;
-    .placeholder();
-
-    &[type='number']::-webkit-inner-spin-button,
-    &[type='number']::-webkit-outer-spin-button {
-      margin: 0;
-      /* stylelint-disable-next-line property-no-vendor-prefix */
-      -webkit-appearance: none;
-      appearance: none;
-    }
-  }
-
-  &-lg {
-    padding: 0;
-    font-size: @font-size-lg;
-
-    input {
-      height: @input-height-lg - 2px;
-    }
-  }
-
-  &-sm {
-    padding: 0;
-
-    input {
-      height: @input-height-sm - 2px;
-      padding: 0 @control-padding-horizontal-sm - 1px;
-    }
-  }
-
-  &-handler-wrap {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 22px;
-    height: 100%;
-    background: @input-number-handler-bg;
-    border-radius: 0 @border-radius-base @border-radius-base 0;
-    opacity: 0;
-    transition: opacity 0.24s linear 0.1s;
-
-    // Fix input number inside Menu makes icon too large
-    // We arise the selector priority by nest selector here
-    // https://github.com/ant-design/ant-design/issues/14367
-    .@{input-number-prefix-cls}-handler {
-      .@{input-number-prefix-cls}-handler-up-inner,
-      .@{input-number-prefix-cls}-handler-down-inner {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: auto;
-        margin-right: 0;
-        font-size: 7px;
-      }
-    }
-
-    .@{input-number-prefix-cls}-borderless & {
-      border-left-width: 0;
-    }
-  }
-
-  &-handler-wrap:hover &-handler {
-    height: 40%;
-  }
-
-  &:hover &-handler-wrap,
-  &-focused &-handler-wrap {
-    opacity: 1;
-  }
-
-  &-handler-up {
-    border-top-right-radius: @border-radius-base;
-    cursor: pointer;
-
-    &-inner {
-      top: 50%;
-      margin-top: -5px;
-      text-align: center;
-    }
-
-    &:hover {
-      height: 60% !important;
-    }
-  }
-
-  &-handler-down {
-    top: 0;
-    border-top: @border-width-base @border-style-base @border-color-base;
-    border-bottom-right-radius: @border-radius-base;
-    cursor: pointer;
-
-    &-inner {
-      top: 50%;
-      text-align: center;
-      transform: translateY(-50%);
-    }
-
-    &:hover {
-      height: 60% !important;
-    }
-    .@{input-number-prefix-cls}-borderless & {
-      border-top-width: 0;
-    }
-  }
-
-  &-handler-up-disabled,
-  &-handler-down-disabled {
-    cursor: not-allowed;
-  }
-
-  &-handler-up-disabled:hover &-handler-up-inner,
-  &-handler-down-disabled:hover &-handler-down-inner {
-    color: @disabled-color;
-  }
-
-  &-borderless {
-    box-shadow: none;
-  }
-
-  // ===================== Out Of Range =====================
-  &-out-of-range {
-    input {
-      color: @error-color;
-    }
-  }
-}
-
-@import './rtl';
+//@import '../../style/themes/index';
+//@import '../../style/mixins/index';
+//@import '../../input/style/mixin';
+//@import './affix';
+//@import './status';
+//
+//@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
+//@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
+//
+//.@{input-number-prefix-cls} {
+//  .reset-component();
+//  .input();
+//
+//  //== Style for input-group: input with label, with button or dropdown...
+//  &-group {
+//    .reset-component();
+//    .input-group(~'@{input-number-prefix-cls}');
+//
+//    &-wrapper {
+//      display: inline-block;
+//      text-align: start;
+//      vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
+//    }
+//  }
+//
+//  display: inline-block;
+//  width: 90px;
+//  margin: 0;
+//  padding: 0;
+//  border: @border-width-base @border-style-base @border-color-base;
+//  border-radius: @border-radius-base;
+//
+//  &-handler {
+//    position: relative;
+//    display: block;
+//    width: 100%;
+//    height: 50%;
+//    overflow: hidden;
+//    color: @text-color-secondary;
+//    font-weight: bold;
+//    line-height: 0;
+//    text-align: center;
+//    border-left: @border-width-base @border-style-base @input-number-handler-border-color;
+//    transition: all 0.1s linear;
+//
+//    &:active {
+//      background: @input-number-handler-active-bg;
+//    }
+//
+//    &:hover &-up-inner,
+//    &:hover &-down-inner {
+//      color: @input-number-handler-hover-bg;
+//    }
+//  }
+//
+//  &-handler-up-inner,
+//  &-handler-down-inner {
+//    .iconfont-mixin();
+//
+//    position: absolute;
+//    right: 4px;
+//    width: 12px;
+//    height: 12px;
+//    color: @text-color-secondary;
+//    line-height: 12px;
+//    transition: all 0.1s linear;
+//    user-select: none;
+//  }
+//
+//  &:hover {
+//    .hover(@input-number-hover-border-color);
+//    & + .@{form-item-prefix-cls}-children-icon {
+//      opacity: 0;
+//      transition: opacity 0.24s linear 0.24s;
+//    }
+//  }
+//
+//  &-focused {
+//    .active();
+//  }
+//
+//  &-disabled {
+//    .disabled();
+//    .@{input-number-prefix-cls}-input {
+//      cursor: not-allowed;
+//    }
+//    .@{input-number-prefix-cls}-handler-wrap {
+//      display: none;
+//    }
+//  }
+//
+//  &-readonly {
+//    .@{input-number-prefix-cls}-handler-wrap {
+//      display: none;
+//    }
+//  }
+//
+//  &-input {
+//    width: 100%;
+//    height: @input-height-base - 2px;
+//    padding: 0 @control-padding-horizontal - 1px;
+//    text-align: left;
+//    background-color: transparent;
+//    border: 0;
+//    border-radius: @border-radius-base;
+//    outline: 0;
+//    transition: all 0.3s linear;
+//    appearance: textfield !important;
+//    .placeholder();
+//
+//    &[type='number']::-webkit-inner-spin-button,
+//    &[type='number']::-webkit-outer-spin-button {
+//      margin: 0;
+//      /* stylelint-disable-next-line property-no-vendor-prefix */
+//      -webkit-appearance: none;
+//      appearance: none;
+//    }
+//  }
+//
+//  &-lg {
+//    padding: 0;
+//    font-size: @font-size-lg;
+//
+//    input {
+//      height: @input-height-lg - 2px;
+//    }
+//  }
+//
+//  &-sm {
+//    padding: 0;
+//
+//    input {
+//      height: @input-height-sm - 2px;
+//      padding: 0 @control-padding-horizontal-sm - 1px;
+//    }
+//  }
+//
+//  &-handler-wrap {
+//    position: absolute;
+//    top: 0;
+//    right: 0;
+//    width: 22px;
+//    height: 100%;
+//    background: @input-number-handler-bg;
+//    border-radius: 0 @border-radius-base @border-radius-base 0;
+//    opacity: 0;
+//    transition: opacity 0.24s linear 0.1s;
+//
+//    // Fix input number inside Menu makes icon too large
+//    // We arise the selector priority by nest selector here
+//    // https://github.com/ant-design/ant-design/issues/14367
+//    .@{input-number-prefix-cls}-handler {
+//      .@{input-number-prefix-cls}-handler-up-inner,
+//      .@{input-number-prefix-cls}-handler-down-inner {
+//        display: flex;
+//        align-items: center;
+//        justify-content: center;
+//        min-width: auto;
+//        margin-right: 0;
+//        font-size: 7px;
+//      }
+//    }
+//
+//    .@{input-number-prefix-cls}-borderless & {
+//      border-left-width: 0;
+//    }
+//  }
+//
+//  &-handler-wrap:hover &-handler {
+//    height: 40%;
+//  }
+//
+//  &:hover &-handler-wrap,
+//  &-focused &-handler-wrap {
+//    opacity: 1;
+//  }
+//
+//  &-handler-up {
+//    border-top-right-radius: @border-radius-base;
+//    cursor: pointer;
+//
+//    &-inner {
+//      top: 50%;
+//      margin-top: -5px;
+//      text-align: center;
+//    }
+//
+//    &:hover {
+//      height: 60% !important;
+//    }
+//  }
+//
+//  &-handler-down {
+//    top: 0;
+//    border-top: @border-width-base @border-style-base @border-color-base;
+//    border-bottom-right-radius: @border-radius-base;
+//    cursor: pointer;
+//
+//    &-inner {
+//      top: 50%;
+//      text-align: center;
+//      transform: translateY(-50%);
+//    }
+//
+//    &:hover {
+//      height: 60% !important;
+//    }
+//    .@{input-number-prefix-cls}-borderless & {
+//      border-top-width: 0;
+//    }
+//  }
+//
+//  &-handler-up-disabled,
+//  &-handler-down-disabled {
+//    cursor: not-allowed;
+//  }
+//
+//  &-handler-up-disabled:hover &-handler-up-inner,
+//  &-handler-down-disabled:hover &-handler-down-inner {
+//    color: @disabled-color;
+//  }
+//
+//  &-borderless {
+//    box-shadow: none;
+//  }
+//
+//  // ===================== Out Of Range =====================
+//  &-out-of-range {
+//    input {
+//      color: @error-color;
+//    }
+//  }
+//}
+//
+//@import './rtl';
diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx
index ff215acbf9..2f0b38527c 100644
--- a/components/input-number/style/index.tsx
+++ b/components/input-number/style/index.tsx
@@ -1,4 +1,389 @@
-import '../../style/index.less';
-import './index.less';
+// deps-lint-skip-all
+import {
+  GenerateStyle,
+  resetComponent,
+  resetIcon,
+  UseComponentStyleResult,
+  useStyleRegister,
+  useToken,
+} from '../../_util/theme';
+import {
+  genActiveStyle,
+  genBasicInputStyle,
+  genDisabledStyle,
+  genHoverStyle,
+  genInputGroupStyle,
+  genPlaceholderStyle,
+  genStatusStyle,
+  initInputToken,
+  InputToken,
+} from '../../input/style';
 
-// deps-lint-skip: form
+interface InputNumberToken extends InputToken {
+  prefixCls: string;
+  inputNumberCls: string;
+  inputNumberHandlerActiveBgColor: string;
+}
+
+const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
+  const {
+    inputNumberCls,
+    borderWidth,
+    borderStyle,
+    borderColor,
+    borderRadius,
+    fontSizeLG,
+    controlHeightLG,
+    controlHeightSM,
+    errorColor,
+    paddingXS,
+    textColorSecondary,
+    durationFast,
+    inputNumberHandlerActiveBgColor,
+    primaryColor,
+    marginXXS,
+    controlHeight,
+    inputPaddingHorizontal,
+    duration,
+    componentBackground,
+    durationMid,
+    textColorDisabled,
+    prefixCls,
+  } = token;
+
+  return {
+    [inputNumberCls]: {
+      ...resetComponent(token),
+      ...genBasicInputStyle(prefixCls, token),
+      ...genStatusStyle(prefixCls, token),
+
+      display: 'inline-block',
+      width: 90, // FIXME: magic number
+      margin: 0,
+      padding: 0,
+      border: `${borderWidth}px ${borderStyle} ${borderColor}`,
+      borderRadius,
+
+      '&-rtl': {
+        direction: 'rtl',
+
+        [`${inputNumberCls}-input`]: {
+          direction: 'rtl',
+        },
+      },
+
+      [`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: {
+        opacity: 1,
+      },
+
+      '&-lg': {
+        padding: 0,
+        fontSize: fontSizeLG,
+
+        [`input${inputNumberCls}-input`]: {
+          height: controlHeightLG - 2 * borderWidth,
+        },
+      },
+
+      '&-sm': {
+        padding: 0,
+
+        [`input${inputNumberCls}-input`]: {
+          height: controlHeightSM - 2 * borderWidth,
+          padding: `0 ${paddingXS - borderWidth}px`,
+        },
+      },
+
+      '&:hover': {
+        ...genHoverStyle(token),
+      },
+
+      '&-focused': {
+        ...genActiveStyle(token),
+      },
+
+      '&-disabled': {
+        ...genDisabledStyle(token),
+        [`${inputNumberCls}-input`]: {
+          cursor: 'not-allowed',
+        },
+        [`${inputNumberCls}-handler-wrap`]: {
+          display: 'none',
+        },
+      },
+
+      '&-readonly': {
+        [`${inputNumberCls}-handler-wrap`]: {
+          display: 'none',
+        },
+      },
+
+      '&-borderless': {
+        boxShadow: 'none',
+      },
+
+      // ===================== Out Of Range =====================
+      '&-out-of-range': {
+        input: {
+          color: errorColor,
+        },
+      },
+
+      // Style for input-group: input with label, with button or dropdown...
+      '&-group': {
+        ...resetComponent(token),
+        ...genInputGroupStyle(prefixCls, token),
+
+        '&-wrapper': {
+          display: 'inline-block',
+          textAlign: 'start',
+          verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403
+
+          [`${inputNumberCls}-affix-wrapper`]: {
+            width: '100%',
+          },
+        },
+      },
+
+      [inputNumberCls]: {
+        '&-handler': {
+          position: 'relative',
+          display: 'block',
+          width: '100%',
+          height: '50%',
+          overflow: 'hidden',
+          color: textColorSecondary,
+          fontWeight: 'bold',
+          lineHeight: 0,
+          textAlign: 'center',
+          borderInlineStart: `${borderWidth}px ${borderStyle} ${borderColor}`,
+          transition: `all ${durationFast} linear`,
+
+          '&:active': {
+            background: inputNumberHandlerActiveBgColor,
+          },
+
+          '&:hover &-up-inner, &:hover &-down-inner': {
+            color: primaryColor,
+          },
+        },
+
+        '&-handler-up-inner, &-handler-down-inner': {
+          ...resetIcon(),
+
+          position: 'absolute',
+          insetInlineEnd: marginXXS,
+          width: controlHeightSM / 2,
+          height: controlHeightSM / 2,
+          color: textColorSecondary,
+          lineHeight: controlHeightSM / 2,
+          transition: `all ${durationFast} linear`,
+          userSelect: 'none',
+        },
+
+        '&-input': {
+          width: '100%',
+          height: controlHeight - 2 * borderWidth,
+          padding: `0 ${inputPaddingHorizontal - borderWidth}px`,
+          textAlign: 'start',
+          backgroundColor: 'transparent',
+          border: 0,
+          borderRadius,
+          outline: 0,
+          transition: `all ${duration} linear`,
+          appearance: 'textfield', // FIXME: important
+          ...genPlaceholderStyle(),
+
+          '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button':
+            {
+              margin: 0,
+              /* stylelint-disable-next-line property-no-vendor-prefix */
+              webkitAppearance: 'none',
+              appearance: 'none',
+            },
+        },
+
+        '&-handler-wrap': {
+          position: 'absolute',
+          insetBlockStart: 0,
+          insetInlineEnd: 0,
+          width: 22, // FIXME: magic number
+          height: '100%',
+          background: componentBackground,
+          borderStartStartRadius: 0,
+          borderStartEndRadius: borderRadius,
+          borderEndEndRadius: borderRadius,
+          borderEndStartRadius: 0,
+          opacity: 0,
+          transition: `opacity ${durationMid} linear ${durationFast}`,
+
+          // Fix input number inside Menu makes icon too large
+          // We arise the selector priority by nest selector here
+          // https://github.com/ant-design/ant-design/issues/14367
+          [`${inputNumberCls}-handler`]: {
+            [`${inputNumberCls}-handler-up-inner,
+          ${inputNumberCls}-handler-down-inner`]: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              minWidth: 'auto',
+              marginRight: 0,
+              fontSize: 7, // FIXME: magic
+            },
+          },
+
+          [`${inputNumberCls}-borderless &`]: {
+            borderInlineStartWidth: 0,
+          },
+
+          [`&:hover ${inputNumberCls}-handler`]: {
+            height: '40%',
+          },
+        },
+
+        '&-handler-up': {
+          borderStartEndRadius: borderRadius,
+          cursor: 'pointer',
+
+          '&-inner': {
+            top: '50%',
+            marginTop: -5, // FIXME: magic
+            textAlign: 'center',
+          },
+
+          '&:hover': {
+            height: '60% !important',
+          },
+        },
+
+        '&-handler-down': {
+          top: 0,
+          borderBlockStart: `${borderWidth}px ${borderStyle} ${borderColor}`,
+          borderEndEndRadius: borderRadius,
+          cursor: 'pointer',
+
+          '&-inner': {
+            top: '50%',
+            textAlign: 'center',
+            transform: 'translateY(-50%)',
+          },
+
+          '&:hover': {
+            height: '60% !important',
+          },
+
+          [`${inputNumberCls}-borderless &`]: {
+            borderBlockStartWidth: 0,
+          },
+        },
+        '&-handler-up-disabled, &-handler-down-disabled': {
+          cursor: 'not-allowed',
+        },
+
+        [`&-handler-up-disabled:hover &-handler-up-inner,
+      &-handler-down-disabled:hover &-handler-down-inner`]: {
+          color: textColorDisabled,
+        },
+      },
+    },
+  };
+};
+
+const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
+  const { inputNumberCls, inputPaddingHorizontal, inputAffixMargin, prefixCls } = token;
+
+  return {
+    [`${inputNumberCls}-affix-wrapper`]: {
+      ...genBasicInputStyle(prefixCls, token),
+      ...genStatusStyle(prefixCls, token),
+      // or number handler will cover form status
+      position: 'relative',
+      display: 'inline-flex',
+      width: 90, // FIXME: magic
+      padding: 0,
+      paddingInlineStart: inputPaddingHorizontal,
+
+      '&:not(&-disabled):hover': {
+        ...genHoverStyle(token),
+        zIndex: 1,
+      },
+
+      '&-focused, &:focus': {
+        zIndex: 1,
+      },
+
+      '&-disabled': {
+        [`${inputNumberCls}[disabled]`]: {
+          background: 'transparent',
+        },
+      },
+
+      [`> div${inputNumberCls}`]: {
+        width: '100%',
+        border: 'none',
+        outline: 'none',
+
+        [`&${inputNumberCls}-focused`]: {
+          boxShadow: 'none !important',
+        },
+      },
+
+      [`input${inputNumberCls}-input`]: {
+        padding: 0,
+      },
+
+      '&::before': {
+        width: 0,
+        visibility: 'hidden',
+        content: '"\\a0"',
+      },
+
+      [`${inputNumberCls}-handler-wrap`]: {
+        zIndex: 2,
+      },
+
+      [inputNumberCls]: {
+        '&-prefix, &-suffix': {
+          display: 'flex',
+          flex: 'none',
+          alignItems: 'center',
+          pointerEvents: 'none',
+        },
+
+        '&-prefix': {
+          marginInlineEnd: inputAffixMargin,
+        },
+
+        '&-suffix': {
+          position: 'absolute',
+          insetBlockStart: 0,
+          insetInlineEnd: 0,
+          zIndex: 1,
+          height: '100%',
+          marginInlineEnd: inputPaddingHorizontal,
+          marginInlineStart: inputAffixMargin,
+        },
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default function useStyle(prefixCls: string): UseComponentStyleResult {
+  const [theme, token, hashId] = useToken();
+
+  const inputNumberToken: InputNumberToken = {
+    ...initInputToken(token),
+    prefixCls,
+    inputNumberCls: `.${prefixCls}`,
+    inputNumberHandlerActiveBgColor: '#f4f4f4', // FIXME: magic number
+  };
+
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+      genInputNumberStyles(inputNumberToken),
+      genAffixWrapperStyles(inputNumberToken),
+    ]),
+    hashId,
+  ];
+}
diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx
index 8eb45c66e7..75e7b0aaf7 100644
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@@ -11,7 +11,7 @@ import {
   withPrefix,
 } from '../../_util/theme';
 
-interface InputToken extends DerivativeToken {
+export interface InputToken extends DerivativeToken {
   inputAffixMargin: number;
   inputPaddingVertical: number;
   inputPaddingVerticalLG: number;
@@ -76,7 +76,7 @@ const genInputSmallStyle = (token: InputToken): CSSObject => ({
   padding: `${token.inputPaddingVerticalSM}px ${token.paddingXS - 1}px`,
 });
 
-const genStatusStyle = (prefixCls: string, token: InputToken): CSSObject => ({
+export const genStatusStyle = (prefixCls: string, token: InputToken): CSSObject => ({
   '&-status-error:not(&-disabled):not(&-borderless)&': {
     '&, &:hover': {
       borderColor: token.errorColor,
@@ -139,7 +139,7 @@ export const genBasicInputStyle = (prefixCls: string, token: InputToken): CSSObj
     ...genActiveStyle(token),
   },
 
-  '&:disabled, &[disabled]': {
+  '&-disabled, &[disabled]': {
     ...genDisabledStyle(token),
   },
 
@@ -180,7 +180,7 @@ export const genBasicInputStyle = (prefixCls: string, token: InputToken): CSSObj
   },
 });
 
-const genInputGroupStyle = (prefixCls: string, token: InputToken): CSSObject => ({
+export const genInputGroupStyle = (prefixCls: string, token: InputToken): CSSObject => ({
   position: 'relative',
   display: 'table',
   width: '100%',
@@ -739,6 +739,27 @@ const genSearchInputStyle = (
   },
 });
 
+export const initInputToken = (token: DerivativeToken): InputToken => ({
+  ...token,
+  inputAffixMargin: token.marginXXS,
+  inputPaddingVertical: Math.max(
+    Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
+      token.borderWidth,
+    3,
+  ),
+  inputPaddingVerticalLG:
+    Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
+    token.borderWidth,
+  inputPaddingVerticalSM: Math.max(
+    Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
+      token.borderWidth,
+    0,
+  ),
+  inputPaddingHorizontal: token.paddingSM - token.borderWidth,
+  inputBorderHoverColor: token.primaryHoverColor,
+  inputBorderActiveColor: token.primaryHoverColor,
+});
+
 // ============================== Export ==============================
 export default function useStyle(
   prefixCls: string,
@@ -746,26 +767,7 @@ export default function useStyle(
 ): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
-  const inputToken: InputToken = {
-    ...token,
-    inputAffixMargin: token.marginXXS,
-    inputPaddingVertical: Math.max(
-      Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
-        token.borderWidth,
-      3,
-    ),
-    inputPaddingVerticalLG:
-      Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
-      token.borderWidth,
-    inputPaddingVerticalSM: Math.max(
-      Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
-        token.borderWidth,
-      0,
-    ),
-    inputPaddingHorizontal: token.paddingSM - 1,
-    inputBorderHoverColor: token.primaryHoverColor,
-    inputBorderActiveColor: token.primaryHoverColor,
-  };
+  const inputToken: InputToken = initInputToken(token);
 
   const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
   const groupPrefixCls = `${prefixCls}-group`;