diff --git a/src/components/sp-image/index.js b/src/components/sp-image/index.js
index 09f3259a5..06c4a5135 100644
--- a/src/components/sp-image/index.js
+++ b/src/components/sp-image/index.js
@@ -96,8 +96,8 @@ function SpImage(props) {
           style={{
             width: '100%',
             height: '100%',
-            borderRadius: Taro.pxTransform(props.circle || props.radius),
-            backgroundColor: props.placeholderColor
+            'border-radius': Taro.pxTransform(props.circle || props.radius),
+            'background-color': props.placeholderColor
           }}
         ></View>
       )}
diff --git a/src/components/sp-page/header.js b/src/components/sp-page/header.js
index 41ab8ce64..2187a4ea2 100644
--- a/src/components/sp-page/header.js
+++ b/src/components/sp-page/header.js
@@ -49,7 +49,7 @@ const CustomNavigationHeader = memo((props) => {
     const headerBg =
       statusBarBgColor ?? immersiveScrollRevealBgColor ?? value?.navigateBackgroundColor
     if (headerBg) {
-      style.backgroundColor = headerBg
+      style['background-color'] = headerBg
     }
     if (value?.navigateBackgroundImage) {
       style['background-image'] = `url(${value?.navigateBackgroundImage})`
diff --git a/src/components/sp-search-one/index.jsx b/src/components/sp-search-one/index.jsx
index b5c33fad7..21c707e2a 100644
--- a/src/components/sp-search-one/index.jsx
+++ b/src/components/sp-search-one/index.jsx
@@ -88,7 +88,7 @@ function SpSearchOne(props) {
     >
       <View
         className='sp-search-one__input-wrap'
-        style={{ backgroundColor: props.backgroundColor, borderColor: props.borderColor }}
+        style={{ 'background-color': props.backgroundColor, 'border-color': props.borderColor }}
       >
         <SpImage src='fv_search.png' width={40} height={40} />
         {!props.inputEnabled && (
diff --git a/src/components/sp-tabbar/index.js b/src/components/sp-tabbar/index.js
index 4a35dd13e..cb5feb329 100755
--- a/src/components/sp-tabbar/index.js
+++ b/src/components/sp-tabbar/index.js
@@ -95,7 +95,7 @@ function SpTabbar() {
   }
 
   return (
-    <View className='sp-tabbar' style={{ backgroundColor: backgroundColor }}>
+    <View className='sp-tabbar' style={{ 'background-color': backgroundColor }}>
       {tabList?.map((item, index) => {
         const iconPath = index == currentIndex ? item.selectedIconPath : item.iconPath
         return (
diff --git a/src/marketing/pages/plusprice/detail-plusprice-list.js b/src/marketing/pages/plusprice/detail-plusprice-list.js
index 04015e2eb..164c32ce7 100644
--- a/src/marketing/pages/plusprice/detail-plusprice-list.js
+++ b/src/marketing/pages/plusprice/detail-plusprice-list.js
@@ -167,7 +167,7 @@ export default class DetailPluspriceList extends Component {
           <View className='title'> {promotion_activity.marketing_name} </View>
           <View
             className='plusprice-goods__timer'
-            style={{ backgroundColor: timeBackgroundColor ? timeBackgroundColor : '#FC682D' }}
+            style={{ 'background-color': timeBackgroundColor ? timeBackgroundColor : '#FC682D' }}
           >
             <View>
               <Text className='time-text'>距结束</Text>
diff --git a/src/pages/category/comps/comp-goods-item.js b/src/pages/category/comps/comp-goods-item.js
index 9aa6523b8..ff5cecb3a 100644
--- a/src/pages/category/comps/comp-goods-item.js
+++ b/src/pages/category/comps/comp-goods-item.js
@@ -156,8 +156,8 @@ function CompGoodsItem(props) {
               key={item.tag_id}
               style={styleNames({
                 color: item.font_color,
-                borderColor: item.tag_color,
-                backgroundColor: item.tag_color
+                'border-color': item.tag_color,
+                'background-color': item.tag_color
               })}
             >
               {item.tag_name}
diff --git a/src/pages/home/wgts/comps/nav-bar/index.jsx b/src/pages/home/wgts/comps/nav-bar/index.jsx
index ad8e7e32f..c5307690e 100644
--- a/src/pages/home/wgts/comps/nav-bar/index.jsx
+++ b/src/pages/home/wgts/comps/nav-bar/index.jsx
@@ -97,7 +97,7 @@ export default function LocationModuleNavBar(props) {
                   {base.navitemborder && isActive && (
                     <View
                       className='wgt-comps__nav-item-border'
-                      style={{ backgroundColor: `${base.navitembordercolor || 'transparent'}` }}
+                      style={{ 'background-color': `${base.navitembordercolor || 'transparent'}` }}
                     />
                   )}
                 </View>
diff --git a/src/pages/home/wgts/couponcard/index.jsx b/src/pages/home/wgts/couponcard/index.jsx
index 3642db21d..523c8508e 100644
--- a/src/pages/home/wgts/couponcard/index.jsx
+++ b/src/pages/home/wgts/couponcard/index.jsx
@@ -67,7 +67,7 @@ function WgtCouponCard(props) {
   const receiveBtnStyle = useMemo(() => {
     const { color, textColor } = receiveBtn
     return {
-      backgroundColor: color,
+      'background-color': color,
       color: textColor
     }
   }, [receiveBtn])
diff --git a/src/pages/home/wgts/store.js b/src/pages/home/wgts/store.js
index 1efbb4348..50d879e9b 100644
--- a/src/pages/home/wgts/store.js
+++ b/src/pages/home/wgts/store.js
@@ -65,7 +65,7 @@ export default class WgtStore extends Component {
           <View
             className='store-wrap'
             key={item.id}
-            style={{ backgroundColor: base.backgroundColor || '#FFF' }}
+            style={{ 'background-color': base.backgroundColor || '#FFF' }}
           >
             <View className='store-info' onClick={this.handleStoreClick.bind(this, item.id)}>
               <SpImage
diff --git a/src/subpage/pages/trade/refund.js b/src/subpage/pages/trade/refund.js
index b8140606c..5cbc6673d 100644
--- a/src/subpage/pages/trade/refund.js
+++ b/src/subpage/pages/trade/refund.js
@@ -285,7 +285,7 @@ export default class TradeRefund extends Component {
           current={curSegIdx}
           tabList={segTypes}
           onClick={this.handleClickTab}
-          customStyle={{ color: colors.data[0].primary, backgroundColor: colors.data[0].primary }}
+          customStyle={{ color: colors.data[0].primary, 'background-color': colors.data[0].primary }}
         >
           {/* {segTypes.map((panes, pIdx) => (
             <AtTabsPane current={curSegIdx} key={panes.status} index={pIdx}></AtTabsPane>
diff --git a/src/subpages/community/trade/refund.js b/src/subpages/community/trade/refund.js
index 7a63907c3..47b5af109 100644
--- a/src/subpages/community/trade/refund.js
+++ b/src/subpages/community/trade/refund.js
@@ -284,7 +284,7 @@ export default class TradeRefund extends Component {
           current={curSegIdx}
           tabList={segTypes}
           onClick={this.handleClickTab}
-          customStyle={{ color: colors.data[0].primary, backgroundColor: colors.data[0].primary }}
+          customStyle={{ color: colors.data[0].primary, 'background-color': colors.data[0].primary }}
         >
           {/* {segTypes.map((panes, pIdx) => (
             <AtTabsPane current={curSegIdx} key={panes.status} index={pIdx}></AtTabsPane>
diff --git a/src/subpages/store/comps/goods-item.js b/src/subpages/store/comps/goods-item.js
index bb0a6794b..ab2f3490e 100644
--- a/src/subpages/store/comps/goods-item.js
+++ b/src/subpages/store/comps/goods-item.js
@@ -151,8 +151,8 @@ function GoodsItem(props) {
               key={item.tag_id}
               style={styleNames({
                 color: item.font_color,
-                borderColor: item.tag_color,
-                backgroundColor: item.tag_color
+                'border-color': item.tag_color,
+                'background-color': item.tag_color
               })}
             >
               {item.tag_name}