diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
index 02a05d4a6..295fcf17a 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -182,7 +182,7 @@ exports[`renders ./components/steps/demo/error.vue correctly 1`] = `
       </div>
       <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="close" class="anticon anticon-close ant-steps-error-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
-        <div class="ant-steps-item-title">In Progress
+        <div class="ant-steps-item-title">In Process
           <!---->
         </div>
         <div class="ant-steps-item-description">This is a description.</div>
@@ -1090,7 +1090,7 @@ exports[`renders ./components/steps/demo/simple.vue correctly 1`] = `
         <div class="ant-steps-item-title">Finished
           <!---->
         </div>
-        <div class="ant-steps-item-description"><span>This is a description.</span></div>
+        <div class="ant-steps-item-description">This is a description.</div>
       </div>
     </div>
   </div>
diff --git a/components/steps/demo/customized-progress-dot.vue b/components/steps/demo/customized-progress-dot.vue
index 0378a39a7..64554bc28 100644
--- a/components/steps/demo/customized-progress-dot.vue
+++ b/components/steps/demo/customized-progress-dot.vue
@@ -54,11 +54,11 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const current = ref<number>(0);
+    const current = ref<number>(1);
 
     return {
       current,
-      description: 'This is a description.',
+      description: 'You can hover on the dot.',
     };
   },
 });
diff --git a/components/steps/demo/error.vue b/components/steps/demo/error.vue
index 8e688900e..0b8c8c045 100644
--- a/components/steps/demo/error.vue
+++ b/components/steps/demo/error.vue
@@ -16,7 +16,7 @@ By using `status` of `Steps`, you can specify the state for current step.
 </docs>
 <template>
   <a-steps
-    :v-model:current="current"
+    v-model:current="current"
     status="error"
     :items="[
       {
@@ -39,7 +39,7 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const current = ref<number>(0);
+    const current = ref<number>(1);
 
     return {
       current,
diff --git a/components/steps/demo/progress.vue b/components/steps/demo/progress.vue
index 6628b392e..6eae28121 100644
--- a/components/steps/demo/progress.vue
+++ b/components/steps/demo/progress.vue
@@ -18,8 +18,8 @@ Steps with progress.
 
 <template>
   <a-steps
+    v-model:current="current"
     :percent="60"
-    :v-model:current="current"
     :items="[
       {
         title: 'Finished',
@@ -37,8 +37,8 @@ Steps with progress.
     ]"
   ></a-steps>
   <a-steps
+    v-model:current="current"
     :percent="60"
-    :current="1"
     size="small"
     :items="[
       {
@@ -62,7 +62,7 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const current = ref<number>(0);
+    const current = ref<number>(1);
 
     return {
       current,
diff --git a/components/vc-steps/Step.tsx b/components/vc-steps/Step.tsx
index 94305d489..3a8aac090 100644
--- a/components/vc-steps/Step.tsx
+++ b/components/vc-steps/Step.tsx
@@ -5,8 +5,9 @@ import type { EventHandler } from '../_util/EventInterface';
 import classNames from '../_util/classNames';
 import warning from '../_util/warning';
 import type { VueNode } from '../_util/type';
-import { stringType, functionType } from '../_util/type';
+import { booleanType, stringType, functionType } from '../_util/type';
 import type { StepIconRender, Status } from './interface';
+import omit from '../_util/omit';
 function isString(str: any): str is string {
   return typeof str === 'string';
 }
@@ -36,12 +37,14 @@ export const VcStepProps = () => ({
   onStepClick: functionType<(next: number) => void>(),
   stepIcon: functionType<StepIconRender>(),
   itemRender: functionType<(stepItem: VueNode) => VueNode>(),
+  __legacy: booleanType(),
 });
 
 export type VCStepProps = Partial<ExtractPropTypes<ReturnType<typeof VcStepProps>>>;
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Step',
+  inheritAttrs: false,
   props: VcStepProps(),
   slots: ['title', 'subTitle', 'description', 'tailContent', 'stepIcon', 'progressDot'],
   setup(props, { slots, emit, attrs }) {
@@ -49,7 +52,7 @@ export default defineComponent({
       emit('click', e);
       emit('stepClick', props.stepIndex);
     };
-    if (attrs.__legacy !== false) {
+    if (props.__legacy !== false) {
       warning(
         false,
         'Steps',
@@ -140,9 +143,6 @@ export default defineComponent({
         [`${prefixCls}-item-active`]: active,
         [`${prefixCls}-item-disabled`]: disabled === true,
       });
-      const stepProps = {
-        class: classString,
-      };
       const stepItemStyle: CSSProperties = {};
       if (itemWidth) {
         stepItemStyle.width = itemWidth;
@@ -165,7 +165,11 @@ export default defineComponent({
         accessibilityProps.onClick = onItemClick;
       }
       const stepNode = (
-        <div {...stepProps} style={[attrs.style as CSSProperties, stepItemStyle]}>
+        <div
+          {...omit(attrs, ['__legacy'])}
+          class={[classString, attrs.class]}
+          style={[attrs.style as CSSProperties, stepItemStyle]}
+        >
           <div {...accessibilityProps} class={`${prefixCls}-item-container`}>
             <div class={`${prefixCls}-item-tail`}>{tailContent}</div>
             <div class={`${prefixCls}-item-icon`}>
diff --git a/tests/shared/demoTest.js b/tests/shared/demoTest.js
index f2401cc4d..28ce7b519 100644
--- a/tests/shared/demoTest.js
+++ b/tests/shared/demoTest.js
@@ -2,7 +2,7 @@ import glob from 'glob';
 import { mount } from '@vue/test-utils';
 import MockDate from 'mockdate';
 import dayjs from 'dayjs';
-import antd from 'ant-design-vue';
+import antd from '../../components';
 
 export default function demoTest(component, options = {}) {
   const suffix = options.suffix || 'vue';