diff --git a/components/_util/BaseInput.tsx b/components/_util/BaseInput.tsx
index 923b24871..e6bc9d708 100644
--- a/components/_util/BaseInput.tsx
+++ b/components/_util/BaseInput.tsx
@@ -3,6 +3,7 @@ import { computed, defineComponent, shallowRef, ref, watch } from 'vue';
 import PropTypes from './vue-types';
 import type { BaseInputInnerExpose } from './BaseInputInner';
 import BaseInputInner from './BaseInputInner';
+import { styleObjectToString } from '../vc-util/Dom/css';
 
 export interface BaseInputExpose {
   focus: () => void;
@@ -32,7 +33,7 @@ const BaseInput = defineComponent({
       default: 'input',
     },
     size: PropTypes.string,
-    style: PropTypes.style,
+    style: PropTypes.oneOfType([String, Object]),
     class: PropTypes.string,
   },
   emits: [
@@ -134,13 +135,18 @@ const BaseInput = defineComponent({
     const handlePaste = (e: ClipboardEvent) => {
       emit('paste', e);
     };
+    const styleString = computed(() => {
+      return props.style && typeof props.style !== 'string'
+        ? styleObjectToString(props.style)
+        : props.style;
+    });
     return () => {
-      const { tag: Tag, style, ...restProps } = props;
+      const { style, lazy, ...restProps } = props;
       return (
         <BaseInputInner
           {...restProps}
           {...attrs}
-          style={JSON.stringify(style)}
+          style={styleString.value}
           onInput={handleInput}
           onChange={handleChange}
           onBlur={handleBlur}
diff --git a/components/typography/util.tsx b/components/typography/util.tsx
index 387699076..d3a486684 100644
--- a/components/typography/util.tsx
+++ b/components/typography/util.tsx
@@ -1,5 +1,6 @@
 import type { CSSProperties, VNodeTypes } from 'vue';
 import { createApp } from 'vue';
+import { styleToString } from '../vc-util/Dom/css';
 
 interface MeasureResult {
   finished: boolean;
@@ -23,13 +24,6 @@ const wrapperStyle: CSSProperties = {
   lineHeight: 'inherit',
 };
 
-function styleToString(style: CSSStyleDeclaration) {
-  // There are some different behavior between Firefox & Chrome.
-  // We have to handle this ourself.
-  const styleNames = Array.prototype.slice.apply(style);
-  return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join('');
-}
-
 function resetDomStyles(target: HTMLElement, origin: HTMLElement) {
   target.setAttribute('aria-hidden', 'true');
   const originStyle = window.getComputedStyle(origin);
diff --git a/components/vc-util/Dom/css.ts b/components/vc-util/Dom/css.ts
index dc5efa4f1..512a2609f 100644
--- a/components/vc-util/Dom/css.ts
+++ b/components/vc-util/Dom/css.ts
@@ -112,3 +112,16 @@ export function getOffset(node: any) {
       (docElem.clientTop || document.body.clientTop || 0),
   };
 }
+
+export function styleToString(style: CSSStyleDeclaration) {
+  // There are some different behavior between Firefox & Chrome.
+  // We have to handle this ourself.
+  const styleNames = Array.prototype.slice.apply(style);
+  return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join('');
+}
+
+export function styleObjectToString(style: Record<string, string>) {
+  return Object.keys(style)
+    .map(name => `${name}: ${style[name]};`)
+    .join('');
+}