chore: step-next demo supports dark mode (#40014)

* chore: step-next demo supports dark mode

* test: update snapshot

components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -4597,12 +4597,12 @@ Array [
     </div>
   </div>,
   <div
-    class="steps-content"
+    style="line-height:260px;text-align:center;color:rgba(0, 0, 0, 0.45);background-color:rgba(0, 0, 0, 0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
   >
     First-content
   </div>,
   <div
-    class="steps-action"
+    style="margin-top:24px"
   >
     <button
       class="ant-btn ant-btn-primary"

components/steps/__tests__/__snapshots__/demo.test.ts.snap

@@ -4165,12 +4165,12 @@ Array [
     </div>
   </div>,
   <div
-    class="steps-content"
+    style="line-height:260px;text-align:center;color:rgba(0, 0, 0, 0.45);background-color:rgba(0, 0, 0, 0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
   >
     First-content
   </div>,
   <div
-    class="steps-action"
+    style="margin-top:24px"
   >
     <button
       class="ant-btn ant-btn-primary"

components/steps/demo/step-next.md

@@ -5,29 +5,3 @@
 ## en-US
 
 Cooperate with the content and buttons, to represent the progress of a process.
-
-```css
-.steps-content {
-  min-height: 200px;
-  margin-top: 16px;
-  padding-top: 80px;
-  text-align: center;
-  background-color: #fafafa;
-  border: 1px dashed #e9e9e9;
-  border-radius: 2px;
-}
-
-.steps-action {
-  margin-top: 24px;
-}
-```
-
-<style>
-[data-theme="dark"] .steps-content {
-  margin-top: 16px;
-  border: 1px dashed #303030;
-  background-color: rgba(255,255,255,0.04);
-  color: rgba(255,255,255,0.65);
-  padding-top: 80px;
-}
-</style>

components/steps/demo/step-next.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, message, Steps } from 'antd';
+import { Button, message, Steps, theme } from 'antd';
 
 const steps = [
   {
@@ -17,6 +17,7 @@ const steps = [
 ];
 
 const App: React.FC = () => {
+  const { token } = theme.useToken();
   const [current, setCurrent] = useState(0);
 
   const next = () => {
@@ -26,13 +27,24 @@ const App: React.FC = () => {
   const prev = () => {
     setCurrent(current - 1);
   };
+
   const items = steps.map((item) => ({ key: item.title, title: item.title }));
 
+  const contentStyle: React.CSSProperties = {
+    lineHeight: '260px',
+    textAlign: 'center',
+    color: token.colorTextTertiary,
+    backgroundColor: token.colorFillAlter,
+    borderRadius: token.borderRadiusLG,
+    border: `1px dashed ${token.colorBorder}`,
+    marginTop: 16,
+  };
+
   return (
     <>
       <Steps current={current} items={items} />
-      <div className="steps-content">{steps[current].content}</div>
-      <div className="steps-action">
+      <div style={contentStyle}>{steps[current].content}</div>
+      <div style={{ marginTop: 24 }}>
         {current < steps.length - 1 && (
           <Button type="primary" onClick={() => next()}>
             Next