diff --git a/src/packages/avatar/demos/taro/demo5.tsx b/src/packages/avatar/demos/taro/demo5.tsx
index 909038a1bf..ea7d8ee9e2 100644
--- a/src/packages/avatar/demos/taro/demo5.tsx
+++ b/src/packages/avatar/demos/taro/demo5.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+// import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+import { Avatar, Cell } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
 import { harmonyAndRn } from '@/utils/platform-taro'
 
@@ -8,12 +9,12 @@ const Demo5 = () => {
     <Cell className="cell-avatar">
       {harmonyAndRn() ? null : (
         <>
-          <Badge value="8">
-            <Avatar icon={<User />} shape="square" />
-          </Badge>
-          <Badge dot>
-            <Avatar icon={<User />} shape="square" />
-          </Badge>
+          {/* <Badge value="8"> */}
+          <Avatar icon={<User />} shape="square" />
+          {/* </Badge> */}
+          {/* <Badge dot> */}
+          <Avatar icon={<User />} shape="square" />
+          {/* </Badge> */}
         </>
       )}
     </Cell>
diff --git a/src/packages/configprovider/demos/taro/demo1.tsx b/src/packages/configprovider/demos/taro/demo1.tsx
index 58c81a15e4..3c348b2f2d 100644
--- a/src/packages/configprovider/demos/taro/demo1.tsx
+++ b/src/packages/configprovider/demos/taro/demo1.tsx
@@ -1,13 +1,14 @@
 import React from 'react'
-import { ConfigProvider, Cell, Rate, Button } from '@nutui/nutui-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
+// import { ConfigProvider, Cell, Rate, Button } from '@nutui/nutui-react-taro'
+import { ConfigProvider, Cell, Button } from '@nutui/nutui-react-taro'
+// import { harmonyAndRn } from '@/utils/platform-taro'
 // todo rate icon
 const Demo1 = () => {
   return (
     <>
       <ConfigProvider>
         <Cell.Group>
-          <Cell>{harmonyAndRn() ? null : <Rate defaultValue={3} />}</Cell>
+          {/* <Cell>{harmonyAndRn() ? null : <Rate defaultValue={3} />}</Cell> */}
           <Cell>
             <Button type="primary" block>
               提交
diff --git a/src/packages/configprovider/demos/taro/demo2.tsx b/src/packages/configprovider/demos/taro/demo2.tsx
index 8251a25392..596a5d9ee6 100644
--- a/src/packages/configprovider/demos/taro/demo2.tsx
+++ b/src/packages/configprovider/demos/taro/demo2.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import { ConfigProvider, Cell, Rate, Button } from '@nutui/nutui-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { ConfigProvider, Cell, Button } from '@nutui/nutui-react-taro'
+// import { ConfigProvider, Cell, Rate, Button } from '@nutui/nutui-react-taro'
+// import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo2 = () => {
   const darkTheme = {
@@ -12,7 +13,7 @@ const Demo2 = () => {
     <>
       <ConfigProvider theme={darkTheme}>
         <Cell.Group>
-          <Cell>{harmonyAndRn() ? null : <Rate defaultValue={3} />}</Cell>
+          {/* <Cell>{harmonyAndRn() ? null : <Rate defaultValue={3} />}</Cell> */}
           <Cell>
             <Button type="primary" block>
               提交
diff --git a/src/packages/empty/demos/taro/demo4.tsx b/src/packages/empty/demos/taro/demo4.tsx
index 2099eb0d7d..3ef5f48c35 100644
--- a/src/packages/empty/demos/taro/demo4.tsx
+++ b/src/packages/empty/demos/taro/demo4.tsx
@@ -1,26 +1,32 @@
 import React, { useState } from 'react'
-import { Tabs, TabPane, Empty } from '@nutui/nutui-react-taro'
+// import { Tabs, TabPane, Empty } from '@nutui/nutui-react-taro'
+import { Empty } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   const [tabvalue, setTabvalue] = useState<string | number>('0')
 
   return (
-    <Tabs
-      value={tabvalue}
-      onChange={(paneKey) => {
-        setTabvalue(paneKey)
-      }}
-    >
-      <TabPane title="无内容" value="0">
-        <Empty status="empty" title="无内容" />
-      </TabPane>
-      <TabPane title="加载失败/错误" value="1">
-        <Empty status="error" title="加载失败/错误" />
-      </TabPane>
-      <TabPane title="无网络" value="2">
-        <Empty status="network" title="无网络" />
-      </TabPane>
-    </Tabs>
+    // <Tabs
+    //   value={tabvalue}
+    //   onChange={(paneKey) => {
+    //     setTabvalue(paneKey)
+    //   }}
+    // >
+    //   <TabPane title="无内容" value="0">
+    //     <Empty status="empty" title="无内容" />
+    //   </TabPane>
+    //   <TabPane title="加载失败/错误" value="1">
+    //     <Empty status="error" title="加载失败/错误" />
+    //   </TabPane>
+    //   <TabPane title="无网络" value="2">
+    //     <Empty status="network" title="无网络" />
+    //   </TabPane>
+    // </Tabs>
+    <>
+      <Empty status="empty" title="无内容" />
+      <Empty status="error" title="加载失败/错误" />
+      <Empty status="network" title="无网络" />
+    </>
   )
 }
 export default Demo4
diff --git a/src/packages/hoverbutton/demos/taro/demo3-rn.tsx b/src/packages/hoverbutton/demos/taro/demo3-rn.tsx
index 5feaddac19..30fe990c82 100644
--- a/src/packages/hoverbutton/demos/taro/demo3-rn.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo3-rn.tsx
@@ -2,23 +2,24 @@
  * 有底部导航栏的情况
  */
 import React from 'react'
-import { HoverButton, Tabbar } from '@nutui/nutui-react-taro'
+// import { HoverButton, Tabbar } from '@nutui/nutui-react-taro'
+import { HoverButton } from '@nutui/nutui-react-taro'
 import { View, Icon } from '@tarojs/components'
-import { Cart, Category, Find, Home, User } from '@nutui/icons-react-taro'
+// import { Cart, Category, Find, Home, User } from '@nutui/icons-react-taro'
 
 const Demo3 = () => {
   return (
     <View>
       <HoverButton icon={<Icon type="search" />} tabbarHeight={48} />
-      {process.env.TARO_ENV !== 'rn' && process.env.TARO_ENV !== 'jdrn' && (
-        <Tabbar fixed>
-          <Tabbar.Item title="首页" icon={<Home size={18} />} />
-          <Tabbar.Item title="分类" icon={<Category size={18} />} />
-          <Tabbar.Item title="发现" icon={<Find size={18} />} />
-          <Tabbar.Item title="购物车" icon={<Cart size={18} />} />
-          <Tabbar.Item title="我的" icon={<User size={18} />} />
-        </Tabbar>
-      )}
+      {/* {process.env.TARO_ENV !== 'rn' && process.env.TARO_ENV !== 'jdrn' && ( */}
+      {/*  <Tabbar fixed> */}
+      {/*    <Tabbar.Item title="首页" icon={<Home size={18} />} /> */}
+      {/*    <Tabbar.Item title="分类" icon={<Category size={18} />} /> */}
+      {/*    <Tabbar.Item title="发现" icon={<Find size={18} />} /> */}
+      {/*    <Tabbar.Item title="购物车" icon={<Cart size={18} />} /> */}
+      {/*    <Tabbar.Item title="我的" icon={<User size={18} />} /> */}
+      {/*  </Tabbar> */}
+      {/* )} */}
     </View>
   )
 }
diff --git a/src/packages/hoverbutton/demos/taro/demo3.tsx b/src/packages/hoverbutton/demos/taro/demo3.tsx
index 86d9644f49..fce218b0a4 100644
--- a/src/packages/hoverbutton/demos/taro/demo3.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo3.tsx
@@ -2,23 +2,24 @@
  * 有底部导航栏的情况
  */
 import React from 'react'
-import { HoverButton, Tabbar } from '@nutui/nutui-react-taro'
+// import { HoverButton, Tabbar } from '@nutui/nutui-react-taro'
+// import { HoverButton } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
-import { Cart, Category, Find, Home, User } from '@nutui/icons-react-taro'
+// import { Cart, Category, Find, Home, User } from '@nutui/icons-react-taro'
 
 const Demo3 = () => {
   return (
     <View>
-      <HoverButton icon={<Cart />} tabbarHeight={48} />
-      {process.env.TARO_ENV !== 'rn' && process.env.TARO_ENV !== 'jdrn' && (
-        <Tabbar fixed>
-          <Tabbar.Item title="首页" icon={<Home size={18} />} />
-          <Tabbar.Item title="分类" icon={<Category size={18} />} />
-          <Tabbar.Item title="发现" icon={<Find size={18} />} />
-          <Tabbar.Item title="购物车" icon={<Cart size={18} />} />
-          <Tabbar.Item title="我的" icon={<User size={18} />} />
-        </Tabbar>
-      )}
+      {/* <HoverButton icon={<Cart />} tabbarHeight={48} /> */}
+      {/* {process.env.TARO_ENV !== 'rn' && process.env.TARO_ENV !== 'jdrn' && ( */}
+      {/*  <Tabbar fixed> */}
+      {/*    <Tabbar.Item title="首页" icon={<Home size={18} />} /> */}
+      {/*    <Tabbar.Item title="分类" icon={<Category size={18} />} /> */}
+      {/*    <Tabbar.Item title="发现" icon={<Find size={18} />} /> */}
+      {/*    <Tabbar.Item title="购物车" icon={<Cart size={18} />} /> */}
+      {/*    <Tabbar.Item title="我的" icon={<User size={18} />} /> */}
+      {/*  </Tabbar> */}
+      {/* )} */}
     </View>
   )
 }
diff --git a/src/packages/hoverbutton/demos/taro/demo4-rn.tsx b/src/packages/hoverbutton/demos/taro/demo4-rn.tsx
index e923516a04..d566bc3e42 100644
--- a/src/packages/hoverbutton/demos/taro/demo4-rn.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo4-rn.tsx
@@ -2,7 +2,8 @@
  * 自定义层级
  */
 import React from 'react'
-import { HoverButton, SafeArea } from '@nutui/nutui-react-taro'
+// import { HoverButton, SafeArea } from '@nutui/nutui-react-taro'
+import { HoverButton } from '@nutui/nutui-react-taro'
 import { View, Icon, Text } from '@tarojs/components'
 // import { Cart } from '@nutui/icons-react-taro'
 import Taro, { pxTransform } from '@tarojs/taro'
@@ -30,7 +31,7 @@ const App = () => {
         >
           这个图层层级为 100
         </Text>
-        <SafeArea position="bottom" />
+        {/* <SafeArea position="bottom" /> */}
       </View>
     </View>
   )
diff --git a/src/packages/hoverbutton/demos/taro/demo4.tsx b/src/packages/hoverbutton/demos/taro/demo4.tsx
index f48324e2d6..dfb6d0a909 100644
--- a/src/packages/hoverbutton/demos/taro/demo4.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo4.tsx
@@ -2,7 +2,8 @@
  * 自定义层级
  */
 import React from 'react'
-import { HoverButton, SafeArea } from '@nutui/nutui-react-taro'
+// import { HoverButton, SafeArea } from '@nutui/nutui-react-taro'
+import { HoverButton } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import { Cart } from '@nutui/icons-react-taro'
 import Taro, { pxTransform } from '@tarojs/taro'
@@ -30,7 +31,7 @@ const App = () => {
         >
           这个图层层级为 100
         </View>
-        <SafeArea position="bottom" />
+        {/* <SafeArea position="bottom" /> */}
       </View>
     </View>
   )
diff --git a/src/packages/input/demos/taro/demo12.tsx b/src/packages/input/demos/taro/demo12.tsx
index 621db690da..c3c757fe0a 100644
--- a/src/packages/input/demos/taro/demo12.tsx
+++ b/src/packages/input/demos/taro/demo12.tsx
@@ -1,18 +1,10 @@
 import React from 'react'
-import { Input, Toast } from '@nutui/nutui-react-taro'
+import { Input } from '@nutui/nutui-react-taro'
 
 const Demo12 = () => {
   return (
     <>
-      <Input
-        placeholder="事件"
-        onClick={() =>
-          Toast.show('click', {
-            title: 'onClick',
-          })
-        }
-        placeholderTextColor="#757575"
-      />
+      <Input placeholder="事件" placeholderTextColor="#757575" />
     </>
   )
 }
diff --git a/src/packages/layout/demo.scss b/src/packages/layout/demo.scss
deleted file mode 100644
index e637bb48b3..0000000000
--- a/src/packages/layout/demo.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.flex-content {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  background-color: #ff8881;
-  font-size: 14px;
-}
-
-.flex-content-light {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  font-size: 14px;
-  background-color: #ffc7c4;
-}
diff --git a/src/packages/layout/demos/taro/demo1.tsx b/src/packages/layout/demos/taro/demo1.tsx
index 439ceae329..fb924cc624 100644
--- a/src/packages/layout/demos/taro/demo1.tsx
+++ b/src/packages/layout/demos/taro/demo1.tsx
@@ -1,47 +1,65 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import { Row, Col } from '@nutui/nutui-react-taro'
+import { pxTransform } from '@tarojs/taro'
 import { View } from '@tarojs/components'
-import '../../demo.scss'
 
 const Demo1 = () => {
+  const flexContent: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: pxTransform(40),
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    textAlign: 'center',
+    borderRadius: pxTransform(6),
+    backgroundColor: '#ff8881',
+    fontSize: pxTransform(14),
+  }
+  const flexContentLight: CSSProperties = {
+    ...flexContent,
+    backgroundColor: '#ffc7c4',
+  }
+
   return (
     <>
       <Row>
         <Col span="24">
-          <View className="flex-content">span:24</View>
+          <View style={flexContent}>span:24</View>
         </Col>
       </Row>
       <Row>
         <Col span="12">
-          <View className="flex-content">span:12</View>
+          <View style={flexContent}>span:12</View>
         </Col>
         <Col span="12">
-          <View className="flex-content-light">span:12</View>
+          <View style={flexContentLight}>span:12</View>
         </Col>
       </Row>
       <Row>
         <Col span="8">
-          <View className="flex-content">span:8</View>
+          <View style={flexContent}>span:8</View>
         </Col>
         <Col span="8">
-          <View className="flex-content-light">span:8</View>
+          <View style={flexContentLight}>span:8</View>
         </Col>
         <Col span="8">
-          <View className="flex-content">span:8</View>
+          <View style={flexContent}>span:8</View>
         </Col>
       </Row>
       <Row>
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content-light">span:6</View>
+          <View style={flexContentLight}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content-light">span:6</View>
+          <View style={flexContentLight}>span:6</View>
         </Col>
       </Row>
     </>
diff --git a/src/packages/layout/demos/taro/demo2.tsx b/src/packages/layout/demos/taro/demo2.tsx
index e0bc0bf9df..428149fdfa 100644
--- a/src/packages/layout/demos/taro/demo2.tsx
+++ b/src/packages/layout/demos/taro/demo2.tsx
@@ -1,20 +1,37 @@
-import React from 'react'
-import { Col, Row } from '@nutui/nutui-react-taro'
+import React, { CSSProperties } from 'react'
+import { Row, Col } from '@nutui/nutui-react-taro'
+import { pxTransform } from '@tarojs/taro'
 import { View } from '@tarojs/components'
-import '../../demo.scss'
 
 const Demo2 = () => {
+  const flexContent: CSSProperties = {
+    display: 'flex',
+    width: '100%',
+    height: pxTransform(40),
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    textAlign: 'center',
+    borderRadius: pxTransform(6),
+    backgroundColor: '#ff8881',
+    fontSize: pxTransform(14),
+  }
+  const flexContentLight: CSSProperties = {
+    ...flexContent,
+    backgroundColor: '#ffc7c4',
+  }
+
   return (
     <>
       <Row gutter="10">
         <Col span="8">
-          <View className="flex-content">span:8</View>
+          <View style={flexContent}>span:8</View>
         </Col>
         <Col span="8">
-          <View className="flex-content-light">span:8</View>
+          <View style={flexContentLight}>span:8</View>
         </Col>
         <Col span="8">
-          <View className="flex-content">span:8</View>
+          <View style={flexContent}>span:8</View>
         </Col>
       </Row>
     </>
diff --git a/src/packages/layout/demos/taro/demo3.tsx b/src/packages/layout/demos/taro/demo3.tsx
index a7121f9064..9898335f80 100644
--- a/src/packages/layout/demos/taro/demo3.tsx
+++ b/src/packages/layout/demos/taro/demo3.tsx
@@ -1,64 +1,80 @@
-import React from 'react'
-import { Col, Row } from '@nutui/nutui-react-taro'
+import React, { CSSProperties } from 'react'
+import { Row, Col } from '@nutui/nutui-react-taro'
+import { pxTransform } from '@tarojs/taro'
 import { View } from '@tarojs/components'
-import '../../demo.scss'
 
 const Demo3 = () => {
+  const flexContent: CSSProperties = {
+    display: 'flex',
+    width: '100%',
+    height: pxTransform(40),
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    textAlign: 'center',
+    borderRadius: pxTransform(6),
+    backgroundColor: '#ff8881',
+    fontSize: pxTransform(14),
+  }
+  const flexContentLight: CSSProperties = {
+    ...flexContent,
+    backgroundColor: '#ffc7c4',
+  }
   return (
     <>
       <Row type="flex" wrap="nowrap">
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content-light">span:6</View>
+          <View style={flexContentLight}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
       </Row>
       <Row type="flex" justify="center">
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content-light">span:6</View>
+          <View style={flexContentLight}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
       </Row>
       <Row type="flex" justify="end">
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content-light">span:6</View>
+          <View style={flexContentLight}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
       </Row>
       <Row type="flex" justify="space-between">
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content-light">span:6</View>
+          <View style={flexContentLight}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
       </Row>
       <Row type="flex" justify="space-around">
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content-light">span:6</View>
+          <View style={flexContentLight}>span:6</View>
         </Col>
         <Col span="6">
-          <View className="flex-content">span:6</View>
+          <View style={flexContent}>span:6</View>
         </Col>
       </Row>
     </>
diff --git a/src/packages/swipe/demos/taro/demo9.tsx b/src/packages/swipe/demos/taro/demo9.tsx
index 402048b810..866995a1c6 100644
--- a/src/packages/swipe/demos/taro/demo9.tsx
+++ b/src/packages/swipe/demos/taro/demo9.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, InputNumber, Swipe } from '@nutui/nutui-react-taro'
 import { Text, View } from '@tarojs/components'
-import pxTransform from '../../../../utils/px-transform'
+import pxTransform from '@/utils/px-transform'
 import { harmonyAndRn } from '@/utils/platform-taro'
 
 const App = () => {