From 11690454c1e4ae4946ccdadf7ed01ca8a2435abc Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Tue, 3 Dec 2024 11:43:17 +0800
Subject: [PATCH 1/2] fix: space harmony

---
 .../nutui-taro-demo/src/pages/index/index.tsx | 48 ++++++++++++-------
 src/packages/space/demo.taro.tsx              | 28 +++--------
 src/packages/space/demo.tsx                   | 25 +++-------
 src/packages/space/demos/h5/demo1.tsx         | 14 +++---
 src/packages/space/demos/h5/demo2.tsx         | 20 ++++----
 src/packages/space/demos/h5/demo3.tsx         | 14 +++---
 src/packages/space/demos/h5/demo4.tsx         | 26 +++++-----
 src/packages/space/demos/h5/demo5.tsx         | 34 ++++++-------
 src/packages/space/demos/h5/demo6.tsx         | 34 ++++++-------
 src/packages/space/demos/taro/demo1.tsx       | 14 +++---
 src/packages/space/demos/taro/demo2.tsx       | 20 ++++----
 src/packages/space/demos/taro/demo3.tsx       | 14 +++---
 src/packages/space/demos/taro/demo4.tsx       | 26 +++++-----
 src/packages/space/demos/taro/demo5.tsx       | 34 ++++++-------
 src/packages/space/demos/taro/demo6.tsx       | 34 ++++++-------
 15 files changed, 185 insertions(+), 200 deletions(-)

diff --git a/packages/nutui-taro-demo/src/pages/index/index.tsx b/packages/nutui-taro-demo/src/pages/index/index.tsx
index fbe4b26b40..7e4bc3ecb6 100644
--- a/packages/nutui-taro-demo/src/pages/index/index.tsx
+++ b/packages/nutui-taro-demo/src/pages/index/index.tsx
@@ -1,5 +1,16 @@
 import Taro from '@tarojs/taro'
-import { View, Image, Swiper, SwiperItem, Text, ScrollView, Button, Input, Video } from '@tarojs/components'
+import {
+  View,
+  Image,
+  Swiper,
+  SwiperItem,
+  Text,
+  ScrollView,
+  Button,
+  Input,
+  Video,
+  Textarea,
+} from '@tarojs/components'
 import pkg from '@/packages/../config.json'
 import packageJson from '@/packages/../../package.json'
 import './index.scss'
@@ -8,9 +19,8 @@ import './index.scss'
 const navs = pkg.nav
 // console.log(navs)
 
-
 // hack taro load button xml
-console.log(Button, Input, Video,Image, Swiper, SwiperItem,  )
+console.log(Button, Input, Video, Image, Swiper, SwiperItem, Textarea)
 
 // try {
 //     console.log('xxx', Schema)
@@ -39,37 +49,39 @@ const Index = () => {
   }
 
   return (
-    <ScrollView className='index'>
-      <View className='index-header'>
+    <ScrollView className="index">
+      <View className="index-header">
         <Image
-          className='index-header-img'
-          src='https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png'
+          className="index-header-img"
+          src="https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png"
         />
-        <View className='index-header-info'>
-          <View className='index-header-info-h1'>NutUI React</View>
-          <View className='index-header-info-p'>
+        <View className="index-header-info">
+          <View className="index-header-info-h1">NutUI React</View>
+          <View className="index-header-info-p">
             京东风格的轻量级小程序组件库 React 版
           </View>
-          <View className='index-header-info-p'>
-            <Text className='index-header-info-text'>v{packageJson?.version}</Text>
+          <View className="index-header-info-p">
+            <Text className="index-header-info-text">
+              v{packageJson?.version}
+            </Text>
           </View>
         </View>
       </View>
-      <View className='index-components'>
+      <View className="index-components">
         {navs.map((nav) => (
-          <View key={nav.enName} className='index-components-item'>
+          <View key={nav.enName} className="index-components-item">
             {nav.enName === 'dataentry' ? null : (
-              <View className='index-components-item-title'>{nav.name}</View>
+              <View className="index-components-item-title">{nav.name}</View>
             )}
-            <View className='index-components-sublist'>
+            <View className="index-components-sublist">
               {nav.packages.map((com) =>
                 com.show && com.taro && com.version === '3.0.0' ? (
                   <View
                     key={com.name}
-                    className='index-components-sublist-item'
+                    className="index-components-sublist-item"
                   >
                     <View
-                      className='index-components-sublist-item-content'
+                      className="index-components-sublist-item-content"
                       key={com.name}
                       onClick={() => gotoNext(com.name, nav.enName)}
                     >
diff --git a/src/packages/space/demo.taro.tsx b/src/packages/space/demo.taro.tsx
index fe9d006da6..2f436f557a 100644
--- a/src/packages/space/demo.taro.tsx
+++ b/src/packages/space/demo.taro.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
-// import Demo4 from './demos/taro/demo4'
+import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 
@@ -44,30 +43,17 @@ const SpaceDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.wrap}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.direction}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <View className="h2">{translated.spaceGap}</View>
-        {/* @TODO ConfigProvider 暂不支持 */}
-        {/* <Cell>
-          <Demo4 />
-        </Cell> */}
+        <Demo4 />
         <View className="h2">{translated.mainAxisAlign}</View>
-        <Cell style={{ display: 'block' }}>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <View className="h2">{translated.crossAxisAlign}</View>
-        <Cell>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/space/demo.tsx b/src/packages/space/demo.tsx
index 929a86e1b6..af75de0352 100644
--- a/src/packages/space/demo.tsx
+++ b/src/packages/space/demo.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Cell from '@/packages/cell'
 import { useTranslate } from '@/sites/assets/locale'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
@@ -40,29 +39,17 @@ const SpaceDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.wrap}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.direction}</h2>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated.spaceGap}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.mainAxisAlign}</h2>
-        <Cell style={{ display: 'block' }}>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <h2>{translated.crossAxisAlign}</h2>
-        <Cell>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </div>
     </>
   )
diff --git a/src/packages/space/demos/h5/demo1.tsx b/src/packages/space/demos/h5/demo1.tsx
index 6e0d753b70..bfb1140102 100644
--- a/src/packages/space/demos/h5/demo1.tsx
+++ b/src/packages/space/demos/h5/demo1.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <Space>
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-    </Space>
+    <Cell>
+      <Space>
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/space/demos/h5/demo2.tsx b/src/packages/space/demos/h5/demo2.tsx
index d9d8365c05..aa7daaee72 100644
--- a/src/packages/space/demos/h5/demo2.tsx
+++ b/src/packages/space/demos/h5/demo2.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Space wrap>
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-      <Button>按钮4</Button>
-      <Button>按钮5</Button>
-      <Button>按钮6</Button>
-    </Space>
+    <Cell>
+      <Space wrap>
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+        <Button>按钮4</Button>
+        <Button>按钮5</Button>
+        <Button>按钮6</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/space/demos/h5/demo3.tsx b/src/packages/space/demos/h5/demo3.tsx
index f23a856f97..60f1a4ce41 100644
--- a/src/packages/space/demos/h5/demo3.tsx
+++ b/src/packages/space/demos/h5/demo3.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
-    <Space direction="vertical">
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-    </Space>
+    <Cell>
+      <Space direction="vertical">
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo3
diff --git a/src/packages/space/demos/h5/demo4.tsx b/src/packages/space/demos/h5/demo4.tsx
index a41810d5f6..15f1aff98a 100644
--- a/src/packages/space/demos/h5/demo4.tsx
+++ b/src/packages/space/demos/h5/demo4.tsx
@@ -1,19 +1,21 @@
 import React from 'react'
-import { Space, Button, ConfigProvider } from '@nutui/nutui-react'
+import { Space, Button, ConfigProvider, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <ConfigProvider
-      theme={{
-        nutuiSpaceGap: '20px',
-      }}
-    >
-      <Space direction="vertical">
-        <Button>按钮1</Button>
-        <Button>按钮2</Button>
-        <Button>按钮3</Button>
-      </Space>
-    </ConfigProvider>
+    <Cell>
+      <ConfigProvider
+        theme={{
+          nutuiSpaceGap: '20px',
+        }}
+      >
+        <Space direction="vertical">
+          <Button>按钮1</Button>
+          <Button>按钮2</Button>
+          <Button>按钮3</Button>
+        </Space>
+      </ConfigProvider>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/space/demos/h5/demo5.tsx b/src/packages/space/demos/h5/demo5.tsx
index 58c1a367cf..b1bfd15705 100644
--- a/src/packages/space/demos/h5/demo5.tsx
+++ b/src/packages/space/demos/h5/demo5.tsx
@@ -1,26 +1,22 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <Space justify="start" wrap>
-      <Button>按钮1</Button>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮2
-        </Button>
-        <Button block>按钮2</Button>
-      </div>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block>按钮3</Button>
-      </div>
-    </Space>
+    <Cell>
+      <Space justify="start" wrap>
+        <Button>按钮1</Button>
+        <div>
+          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+          <Button>按钮2</Button>
+        </div>
+        <div>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮3</Button>
+        </div>
+      </Space>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/space/demos/h5/demo6.tsx b/src/packages/space/demos/h5/demo6.tsx
index 8c64eaa561..ac99a2e6cc 100644
--- a/src/packages/space/demos/h5/demo6.tsx
+++ b/src/packages/space/demos/h5/demo6.tsx
@@ -1,26 +1,22 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   return (
-    <Space align="end" wrap>
-      <Button>按钮1</Button>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮2
-        </Button>
-        <Button block>按钮2</Button>
-      </div>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block>按钮3</Button>
-      </div>
-    </Space>
+    <Cell>
+      <Space align="end" wrap>
+        <Button>按钮1</Button>
+        <div>
+          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+          <Button>按钮2</Button>
+        </div>
+        <div>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮3</Button>
+        </div>
+      </Space>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/space/demos/taro/demo1.tsx b/src/packages/space/demos/taro/demo1.tsx
index f8adc517ff..1b7d5c8513 100644
--- a/src/packages/space/demos/taro/demo1.tsx
+++ b/src/packages/space/demos/taro/demo1.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react-taro'
+import { Cell, Space, Button } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <Space>
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-    </Space>
+    <Cell>
+      <Space>
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/space/demos/taro/demo2.tsx b/src/packages/space/demos/taro/demo2.tsx
index 255c314f37..216f29f199 100644
--- a/src/packages/space/demos/taro/demo2.tsx
+++ b/src/packages/space/demos/taro/demo2.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react-taro'
+import { Space, Button, Cell } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <Space wrap>
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-      <Button>按钮4</Button>
-      <Button>按钮5</Button>
-      <Button>按钮6</Button>
-    </Space>
+    <Cell>
+      <Space wrap>
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+        <Button>按钮4</Button>
+        <Button>按钮5</Button>
+        <Button>按钮6</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/space/demos/taro/demo3.tsx b/src/packages/space/demos/taro/demo3.tsx
index f5dc31abde..6dcb8dc942 100644
--- a/src/packages/space/demos/taro/demo3.tsx
+++ b/src/packages/space/demos/taro/demo3.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react-taro'
+import { Space, Button, Cell } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   return (
-    <Space direction="vertical">
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-    </Space>
+    <Cell>
+      <Space direction="vertical">
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo3
diff --git a/src/packages/space/demos/taro/demo4.tsx b/src/packages/space/demos/taro/demo4.tsx
index e68be306e6..3e4b8a6511 100644
--- a/src/packages/space/demos/taro/demo4.tsx
+++ b/src/packages/space/demos/taro/demo4.tsx
@@ -1,19 +1,21 @@
 import React from 'react'
-import { Space, Button, ConfigProvider } from '@nutui/nutui-react-taro'
+import { Space, Button, ConfigProvider, Cell } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   return (
-    <ConfigProvider
-      theme={{
-        nutuiSpaceGap: '20px',
-      }}
-    >
-      <Space direction="vertical">
-        <Button>按钮1</Button>
-        <Button>按钮2</Button>
-        <Button>按钮3</Button>
-      </Space>
-    </ConfigProvider>
+    <Cell>
+      <ConfigProvider
+        theme={{
+          nutuiSpaceGap: '20px',
+        }}
+      >
+        <Space direction="vertical">
+          <Button>按钮1</Button>
+          <Button>按钮2</Button>
+          <Button>按钮3</Button>
+        </Space>
+      </ConfigProvider>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/space/demos/taro/demo5.tsx b/src/packages/space/demos/taro/demo5.tsx
index 6c037bab91..5ac53705bf 100644
--- a/src/packages/space/demos/taro/demo5.tsx
+++ b/src/packages/space/demos/taro/demo5.tsx
@@ -1,27 +1,23 @@
 import React from 'react'
 import { View } from '@tarojs/components'
-import { Space, Button } from '@nutui/nutui-react-taro'
+import { Space, Button, Cell } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
   return (
-    <Space justify="start" wrap>
-      <Button>按钮1</Button>
-      <View>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮2
-        </Button>
-        <Button block>按钮2</Button>
-      </View>
-      <View>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block>按钮3</Button>
-      </View>
-    </Space>
+    <Cell>
+      <Space justify="start" wrap>
+        <Button>按钮1</Button>
+        <View>
+          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+          <Button>按钮2</Button>
+        </View>
+        <View>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮3</Button>
+        </View>
+      </Space>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/space/demos/taro/demo6.tsx b/src/packages/space/demos/taro/demo6.tsx
index e37fcbebb7..3cd6f870ac 100644
--- a/src/packages/space/demos/taro/demo6.tsx
+++ b/src/packages/space/demos/taro/demo6.tsx
@@ -1,27 +1,23 @@
 import React from 'react'
 import { View } from '@tarojs/components'
-import { Space, Button } from '@nutui/nutui-react-taro'
+import { Space, Button, Cell } from '@nutui/nutui-react-taro'
 
 const Demo6 = () => {
   return (
-    <Space align="end" wrap>
-      <Button>按钮1</Button>
-      <View>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮2
-        </Button>
-        <Button block>按钮2</Button>
-      </View>
-      <View>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block>按钮3</Button>
-      </View>
-    </Space>
+    <Cell>
+      <Space align="end" wrap>
+        <Button>按钮1</Button>
+        <View>
+          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+          <Button>按钮2</Button>
+        </View>
+        <View>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮3</Button>
+        </View>
+      </Space>
+    </Cell>
   )
 }
 export default Demo6

From 88379d47825d487fc7bde62fb86b88b0414cb376 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 4 Dec 2024 15:54:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=94=B9=E7=94=A8=20space=20?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/space/demos/h5/demo5.tsx   | 14 +++++++-------
 src/packages/space/demos/h5/demo6.tsx   | 14 +++++++-------
 src/packages/space/demos/taro/demo5.tsx | 15 +++++++--------
 src/packages/space/demos/taro/demo6.tsx | 15 +++++++--------
 4 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/packages/space/demos/h5/demo5.tsx b/src/packages/space/demos/h5/demo5.tsx
index b1bfd15705..9c3395a617 100644
--- a/src/packages/space/demos/h5/demo5.tsx
+++ b/src/packages/space/demos/h5/demo5.tsx
@@ -6,15 +6,15 @@ const Demo5 = () => {
     <Cell>
       <Space justify="start" wrap>
         <Button>按钮1</Button>
-        <div>
-          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+        <Space direction="vertical">
           <Button>按钮2</Button>
-        </div>
-        <div>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮2</Button>
+        </Space>
+        <Space direction="vertical">
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
           <Button>按钮3</Button>
-        </div>
+        </Space>
       </Space>
     </Cell>
   )
diff --git a/src/packages/space/demos/h5/demo6.tsx b/src/packages/space/demos/h5/demo6.tsx
index ac99a2e6cc..e8020e71d5 100644
--- a/src/packages/space/demos/h5/demo6.tsx
+++ b/src/packages/space/demos/h5/demo6.tsx
@@ -6,15 +6,15 @@ const Demo6 = () => {
     <Cell>
       <Space align="end" wrap>
         <Button>按钮1</Button>
-        <div>
-          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+        <Space direction="vertical">
           <Button>按钮2</Button>
-        </div>
-        <div>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮2</Button>
+        </Space>
+        <Space direction="vertical">
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
           <Button>按钮3</Button>
-        </div>
+        </Space>
       </Space>
     </Cell>
   )
diff --git a/src/packages/space/demos/taro/demo5.tsx b/src/packages/space/demos/taro/demo5.tsx
index 5ac53705bf..c55b48554f 100644
--- a/src/packages/space/demos/taro/demo5.tsx
+++ b/src/packages/space/demos/taro/demo5.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { View } from '@tarojs/components'
 import { Space, Button, Cell } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
@@ -7,15 +6,15 @@ const Demo5 = () => {
     <Cell>
       <Space justify="start" wrap>
         <Button>按钮1</Button>
-        <View>
-          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+        <Space direction="vertical">
           <Button>按钮2</Button>
-        </View>
-        <View>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮2</Button>
+        </Space>
+        <Space direction="vertical">
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
           <Button>按钮3</Button>
-        </View>
+        </Space>
       </Space>
     </Cell>
   )
diff --git a/src/packages/space/demos/taro/demo6.tsx b/src/packages/space/demos/taro/demo6.tsx
index 3cd6f870ac..52de34e351 100644
--- a/src/packages/space/demos/taro/demo6.tsx
+++ b/src/packages/space/demos/taro/demo6.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { View } from '@tarojs/components'
 import { Space, Button, Cell } from '@nutui/nutui-react-taro'
 
 const Demo6 = () => {
@@ -7,15 +6,15 @@ const Demo6 = () => {
     <Cell>
       <Space align="end" wrap>
         <Button>按钮1</Button>
-        <View>
-          <Button style={{ marginBottom: 5 }}>按钮2</Button>
+        <Space direction="vertical">
           <Button>按钮2</Button>
-        </View>
-        <View>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
-          <Button style={{ marginBottom: 5 }}>按钮3</Button>
+          <Button>按钮2</Button>
+        </Space>
+        <Space direction="vertical">
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
           <Button>按钮3</Button>
-        </View>
+        </Space>
       </Space>
     </Cell>
   )