diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss
index 5fd64c8c5f..18fea0ecfc 100644
--- a/src/packages/address/address.scss
+++ b/src/packages/address/address.scss
@@ -67,10 +67,10 @@
       font-size: 12px;
       border-radius: 4px;
       margin-bottom: 7px;
-      /* #ifdef harmony*/
+      /* #ifdef harmony dynamic*/
       margin-right: 6px;
       /* #endif */
-      /* #ifndef harmony*/
+      /* #ifndef harmony dynamic*/
       margin-right: 7px;
       /* #endif */
       background-color: $color-background-sunken;
diff --git a/src/packages/avatar/avatar.taro.tsx b/src/packages/avatar/avatar.taro.tsx
index 29bdeb85e3..a48a855fba 100644
--- a/src/packages/avatar/avatar.taro.tsx
+++ b/src/packages/avatar/avatar.taro.tsx
@@ -10,14 +10,14 @@ import classNames from 'classnames'
 import { User } from '@nutui/icons-react-taro'
 import { AvatarContext } from '@/packages/avatargroup/context'
 import { ComponentDefaults } from '@/utils/typings'
-import { harmony } from '@/utils/taro/platform'
+import { harmony, td } from '@/utils/taro/platform'
 import AvatarGroup from '@/packages/avatargroup/index.taro'
 import { pxTransform } from '@/utils/taro/px-transform'
 import { TaroAvatarProps } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
-  size: harmony() ? '40' : '',
+  size: harmony() || td() ? '40' : '',
   shape: 'round',
   icon: '',
   background: '#eee',
diff --git a/src/packages/avatar/demos/taro/demo4.tsx b/src/packages/avatar/demos/taro/demo4.tsx
index 26335c20de..94ad6977f4 100644
--- a/src/packages/avatar/demos/taro/demo4.tsx
+++ b/src/packages/avatar/demos/taro/demo4.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
-import { Avatar, Cell, harmony } from '@nutui/nutui-react-taro'
+import { Avatar, Cell, harmony, td } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
 
 const Demo4 = () => {
   const styles = { marginRight: 30 }
+  const variableDisabled = harmony() || td()
   return (
     <Cell className="cell-avatar">
       <Avatar
         color="#ffffff"
-        background={`${harmony() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
+        background={`${variableDisabled ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
         icon={<User />}
         style={styles}
       />
       <Avatar
-        color={`${harmony() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
-        background={`${harmony() ? '#ffebf1' : 'var(--nutui-color-primary-light-pressed)'}`}
+        color={`${variableDisabled ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
+        background={`${variableDisabled ? '#ffebf1' : 'var(--nutui-color-primary-light-pressed)'}`}
       >
         U
       </Avatar>
diff --git a/src/packages/avatar/demos/taro/demo6.tsx b/src/packages/avatar/demos/taro/demo6.tsx
index 5152402d95..315a46ff95 100644
--- a/src/packages/avatar/demos/taro/demo6.tsx
+++ b/src/packages/avatar/demos/taro/demo6.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
-import { Avatar, Cell, harmony } from '@nutui/nutui-react-taro'
+import { Avatar, Cell, harmony, td } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
 
 const Demo6 = () => {
+  const variableDisabled = harmony() || td()
   return (
     <>
       <Cell>
@@ -10,8 +11,8 @@ const Demo6 = () => {
           <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
           <Avatar icon={<User />} />
           <Avatar
-            color={`${harmony() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
-            background={`${harmony() ? '#ffd6e1' : 'var(--nutui-brand-2)'}`}
+            color={`${variableDisabled ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
+            background={`${variableDisabled ? '#ffd6e1' : 'var(--nutui-brand-2)'}`}
           >
             U
           </Avatar>
@@ -22,8 +23,8 @@ const Demo6 = () => {
           <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
           <Avatar icon={<User />} />
           <Avatar
-            color={`${harmony() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
-            background={`${harmony() ? '#ffd6e1' : 'var(--nutui-brand-2)'}`}
+            color={`${variableDisabled ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
+            background={`${variableDisabled ? '#ffd6e1' : 'var(--nutui-brand-2)'}`}
           >
             U
           </Avatar>
diff --git a/src/packages/avatar/demos/taro/demo7.tsx b/src/packages/avatar/demos/taro/demo7.tsx
index fc6e59b199..0ef3082ca4 100644
--- a/src/packages/avatar/demos/taro/demo7.tsx
+++ b/src/packages/avatar/demos/taro/demo7.tsx
@@ -1,16 +1,17 @@
 import React from 'react'
-import { Avatar, Cell, harmony } from '@nutui/nutui-react-taro'
+import { Avatar, Cell, harmony, td } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
 
 const Demo7 = () => {
+  const variableDisabled = harmony() || td()
   return (
     <Cell className="cell-avatar">
       <Avatar.Group max="3" level="right" maxContent="...">
         <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
         <Avatar icon={<User />} />
         <Avatar
-          color={`${harmony() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
-          background={`${harmony() ? '#ffd6e1' : 'var(--nutui-brand-2)'}`}
+          color={`${variableDisabled ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
+          background={`${variableDisabled ? '#ffd6e1' : 'var(--nutui-brand-2)'}`}
         >
           U
         </Avatar>
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 0ce4c5b8aa..15201dfb8a 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -2,10 +2,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef harmony*/
+  /* #ifdef harmony dynamic*/
   width: 80px;
   /* #endif */
-  /* #ifndef harmony*/
+  /* #ifndef harmony dynamic*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -72,7 +72,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    /* #ifndef harmony */
+    /* #ifndef harmony dynamic*/
     background: initial;
     /* #endif */
     .nut-icon {
diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss
index 6a2e1fa134..067cfa9b49 100644
--- a/src/packages/collapseitem/collapseitem.scss
+++ b/src/packages/collapseitem/collapseitem.scss
@@ -38,10 +38,10 @@
       left: 16px;
       bottom: 0;
       border-bottom: $collapse-item-header-border-bottom;
-      /* #ifdef harmony */
+      /* #ifdef harmony dynamic*/
       transform: scale(1, 1);
       /* #endif */
-      /* #ifndef harmony */
+      /* #ifndef harmony dynamic*/
       transform: scale(1, 0.5);
       /* #endif */
     }
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index 4f3081a3a9..4f199ff480 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -8,7 +8,7 @@
   align-items: center;
   width: $dialog-width;
   min-width: $dialog-min-width;
-  /* #ifndef harmony*/
+  /* #ifndef harmony dynamic*/
   max-height: 67%;
   /* #endif */
   min-height: $dialog-min-height;
diff --git a/src/utils/camel-case.ts b/src/packages/icon/demos/camel-case.ts
similarity index 100%
rename from src/utils/camel-case.ts
rename to src/packages/icon/demos/camel-case.ts
diff --git a/src/packages/icon/demos/h5/demo6.tsx b/src/packages/icon/demos/h5/demo6.tsx
index bba20d9d8d..8e65b41018 100644
--- a/src/packages/icon/demos/h5/demo6.tsx
+++ b/src/packages/icon/demos/h5/demo6.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { IconFontConfig, IconFont } from '@nutui/icons-react'
-import { Cell, Toast, camelCase } from '@nutui/nutui-react'
+import { Cell, Toast } from '@nutui/nutui-react'
+import { camelCase } from '../camel-case'
 
 const generateCopyText = (name: string) => {
   return `<${camelCase(name, { pascalCase: true })} />`
diff --git a/src/packages/icon/demos/h5/demo7.tsx b/src/packages/icon/demos/h5/demo7.tsx
index 68d7c213bd..6f242e75f3 100644
--- a/src/packages/icon/demos/h5/demo7.tsx
+++ b/src/packages/icon/demos/h5/demo7.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { IconFontConfig, IconFont } from '@nutui/icons-react'
-import { Cell, Toast, camelCase } from '@nutui/nutui-react'
+import { Cell, Toast } from '@nutui/nutui-react'
+import { camelCase } from '../camel-case'
 
 const generateAMCopyText = (icon: any) => {
   return `<${camelCase(icon.name, {
diff --git a/src/packages/icon/demos/taro/demo6.tsx b/src/packages/icon/demos/taro/demo6.tsx
index e2cdc44275..07a57338b4 100644
--- a/src/packages/icon/demos/taro/demo6.tsx
+++ b/src/packages/icon/demos/taro/demo6.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import * as iconfonts from '@nutui/icons-react-taro'
-import { Cell, Toast, camelCase } from '@nutui/nutui-react-taro'
+import { Cell, Toast } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import { camelCase } from '../camel-case'
 
 const Demo6 = () => {
   const generateCopyText = (name: string) => {
diff --git a/src/packages/icon/demos/taro/demo7.tsx b/src/packages/icon/demos/taro/demo7.tsx
index c3936badf9..63f8d7db04 100644
--- a/src/packages/icon/demos/taro/demo7.tsx
+++ b/src/packages/icon/demos/taro/demo7.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import * as iconfonts from '@nutui/icons-react-taro'
-import { Cell, Toast, camelCase } from '@nutui/nutui-react-taro'
+import { Cell, Toast } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import { camelCase } from '../camel-case'
 
 const Demo7 = () => {
   const generateAMCopyText = (icon: any) => {
diff --git a/src/packages/indicator/demo.taro.tsx b/src/packages/indicator/demo.taro.tsx
index 94d28b83df..3fa9e1d208 100644
--- a/src/packages/indicator/demo.taro.tsx
+++ b/src/packages/indicator/demo.taro.tsx
@@ -44,19 +44,14 @@ const IndicatorDemo = () => {
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
         <Demo1 />
-
         <View className="h2">{translated.white}</View>
         <Demo5 />
-
         <View className="h2">{translated.type}</View>
         <Demo6 />
-
         <View className="h2">{translated.customNode}</View>
         <Demo2 />
-
         <View className="h2">{translated.custom}</View>
         <Demo3 />
-
         <View className="h2">{translated.vertical}</View>
         <Demo4 />
       </ScrollView>
diff --git a/src/packages/indicator/demos/taro/demo4.tsx b/src/packages/indicator/demos/taro/demo4.tsx
index b2aea2f73f..87a144a9ff 100644
--- a/src/packages/indicator/demos/taro/demo4.tsx
+++ b/src/packages/indicator/demos/taro/demo4.tsx
@@ -46,15 +46,7 @@ const Demo4 = () => {
         />
       </Cell>
       <Cell style={{ background: '#C2C4CC' }}>
-        <Indicator
-          total={6}
-          current={2}
-          direction="vertical"
-          color="default"
-          style={{
-            marginLeft: pxTransform(50),
-          }}
-        />
+        <Indicator total={6} current={2} direction="vertical" color="default" />
       </Cell>
     </>
   )
diff --git a/src/packages/loading/loading.taro.tsx b/src/packages/loading/loading.taro.tsx
index 1d9b3c27c0..fcecdba8e3 100644
--- a/src/packages/loading/loading.taro.tsx
+++ b/src/packages/loading/loading.taro.tsx
@@ -20,10 +20,7 @@ const defaultProps = {
   type: 'circular',
   direction: 'horizontal',
 } as TaroLoadingProps
-const defaultLottieProps = {
-  loop: true,
-  autoplay: true,
-}
+
 export const Loading = React.forwardRef<LoadingRef, Partial<TaroLoadingProps>>(
   (props, ref) => {
     const { className, style, children, direction, icon, ...rest } = {
diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss
index 3666c875f4..85382fe906 100644
--- a/src/packages/numberkeyboard/numberkeyboard.scss
+++ b/src/packages/numberkeyboard/numberkeyboard.scss
@@ -50,10 +50,10 @@
     &-wrapper {
       position: relative;
       flex: 1;
-      /* #ifdef harmony */
+      /* #ifdef harmony dynamic*/
       width: 33%;
       /* #endif */
-      /* #ifndef harmony */
+      /* #ifndef harmony dynamic*/
       flex-basis: 33%;
       /* #endif */
       box-sizing: border-box;
diff --git a/src/packages/pagination/demos/taro/demo5.tsx b/src/packages/pagination/demos/taro/demo5.tsx
index f57d0117f1..47687ebf71 100644
--- a/src/packages/pagination/demos/taro/demo5.tsx
+++ b/src/packages/pagination/demos/taro/demo5.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View } from '@tarojs/components'
+import { Text } from '@tarojs/components'
 import { Pagination } from '@nutui/nutui-react-taro'
 import { ArrowLeft, ArrowRight } from '@nutui/icons-react-taro'
 
@@ -11,9 +11,9 @@ const Demo5 = () => {
   }
   const itemRender = (page: any, current: number) => {
     return (
-      <View style={{ color: current === page.number ? '#fff' : '#ff0f23' }}>
+      <Text style={{ color: current === page.number ? '#fff' : '#ff0f23' }}>
         {page.number === 3 ? 'hot' : page.text}
-      </View>
+      </Text>
     )
   }
   return (
diff --git a/src/packages/pagination/pagination.taro.tsx b/src/packages/pagination/pagination.taro.tsx
index 23d8e2ef50..aaaefb4c4b 100644
--- a/src/packages/pagination/pagination.taro.tsx
+++ b/src/packages/pagination/pagination.taro.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { ComponentDefaults } from '@/utils/typings'
@@ -134,9 +134,9 @@ export const Pagination: FunctionComponent<
       )}
       {mode === 'lite' && (
         <View className={`${classPrefix}-lite`}>
-          <View className={`${classPrefix}-lite-active`}>{current}</View>
-          <View className={`${classPrefix}-lite-spliterator`}>/</View>
-          <View className={`${classPrefix}-lite-default`}>{pageCount}</View>
+          <Text className={`${classPrefix}-lite-active`}>{current}</Text>
+          <Text className={`${classPrefix}-lite-spliterator`}>/</Text>
+          <Text className={`${classPrefix}-lite-default`}>{pageCount}</Text>
         </View>
       )}
     </View>
diff --git a/src/packages/skeleton/demos/taro/demo4.tsx b/src/packages/skeleton/demos/taro/demo4.tsx
index 3c237a1f5b..9d92878e71 100644
--- a/src/packages/skeleton/demos/taro/demo4.tsx
+++ b/src/packages/skeleton/demos/taro/demo4.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import { Cell, Skeleton, pxTransform } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo4 = () => {
   return (
     <Cell>
       <Skeleton width={pxTransform(132)} height={pxTransform(132)} />
-      <div
+      <View
         style={{
           display: 'flex',
           flexGrow: 1,
@@ -16,7 +17,7 @@ const Demo4 = () => {
         <Skeleton size="large" style={{ marginBottom: pxTransform(5) }} />
         <Skeleton width="30%" style={{ marginBottom: pxTransform(5) }} />
         <Skeleton width="80%" size="small" rows={3} />
-      </div>
+      </View>
     </Cell>
   )
 }
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index 706763fe60..17d281e6d8 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -181,7 +181,7 @@
 
   // 纵向滚动条
   &-vertical {
-    /* #ifdef harmony*/
+    /* #ifdef harmony dynamic*/
     flex: 1;
     min-width: 0;
     /* #endif */
diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss
index ccb308ffa5..74a2c6028d 100644
--- a/src/packages/tabbaritem/tabbaritem.scss
+++ b/src/packages/tabbaritem/tabbaritem.scss
@@ -13,10 +13,10 @@
     width: 24px;
     height: 24px;
     font-size: 24px;
-    /* #ifdef harmony*/
+    /* #ifdef harmony dynamic*/
     color: $tabbar-inactive-color;
     /* #endif*/
-    /* #ifndef harmony*/
+    /* #ifndef harmony dynamic*/
     color: inherit;
     /* #endif*/
   }
@@ -54,10 +54,10 @@
 
     .nut-tabbar-item-text,
     .nut-icon {
-      /* #ifdef harmony*/
+      /* #ifdef harmony dynamic*/
       color: $tabbar-active-color;
       /* #endif*/
-      /* #ifndef harmony*/
+      /* #ifndef harmony dynamic*/
       color: inherit;
       /* #endif*/
     }
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index da673c31c4..f2d51cf453 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -214,10 +214,10 @@
 .nut-tabs-vertical {
   .nut-tabs-ellipsis {
     white-space: break-spaces;
-    /* #ifdef harmony */
+    /* #ifdef harmony dynamic*/
     padding-left: 12px;
     /* #endif */
-    /* #ifndef harmony */
+    /* #ifndef harmony dynamic*/
     padding-left: 6px;
     /* #endif */
     width: 90px;
diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss
index 539e3bc107..cb29cfc295 100644
--- a/src/packages/toast/toast.scss
+++ b/src/packages/toast/toast.scss
@@ -28,10 +28,10 @@
   }
 
   &-overlay-default-taro {
-    /* #ifdef harmony */
+    /* #ifdef harmony dynamic*/
     background-color: rgba(0, 0, 0, 0);
     /* #endif */
-    /* #ifndef harmony */
+    /* #ifndef harmony dynamic*/
     --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
     /* #endif */
   }
diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts
index 919a5f9395..dba3cac020 100644
--- a/src/utils/index.taro.ts
+++ b/src/utils/index.taro.ts
@@ -1,6 +1,5 @@
 export * from './taro/add-color-for-harmony'
 export * from './bound'
-export * from './camel-case'
 export * from './can-use-dom'
 export * from './clamp'
 export * from './date'
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 4b536b1353..0cf6130d54 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,4 @@
 export * from './bound'
-export * from './camel-case'
 export * from './can-use-dom'
 export * from './clamp'
 export * from './date'
diff --git a/src/utils/taro/platform.ts b/src/utils/taro/platform.ts
index 02ff3e9072..d8018d2539 100644
--- a/src/utils/taro/platform.ts
+++ b/src/utils/taro/platform.ts
@@ -12,3 +12,7 @@ export const web = () => {
 export const miniprogram = () => {
   return ['mini'].includes(getEnv().toLowerCase())
 }
+
+export const td = () => {
+  return ['dynamic'].includes(getEnv().toLowerCase())
+}
diff --git a/src/utils/taro/px-transform.ts b/src/utils/taro/px-transform.ts
index ca70a7105b..12dc743f55 100644
--- a/src/utils/taro/px-transform.ts
+++ b/src/utils/taro/px-transform.ts
@@ -1,8 +1,9 @@
 import { pxTransform as transform } from '@tarojs/taro'
-import { harmony } from './platform'
+import { harmony, td } from './platform'
+// td todo
 
 export function pxTransform(value: number, radix?: number): any {
   // @ts-ignore
-  if (harmony()) return transform(value, radix || 375)
+  if (harmony() || td()) return transform(value, radix || 375)
   return `${value}px`
 }