From 13c9d707582b85fe945c9b8724a362fdc8916b24 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Mon, 24 Jun 2024 20:32:29 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix(Button):=20rn=20=E9=B8=BF=E8=92=99?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/button/button copy.scss      | 465 ++++++++++++++++++++++
 src/packages/button/button.harmony.css    | 226 ++++++-----
 src/packages/button/button.scss           | 149 ++++---
 src/packages/button/button.taro.tsx       |  32 +-
 src/packages/button/button.tsx            |   7 +-
 src/packages/button/demo.taro.tsx         |  10 +-
 src/packages/button/demos/taro/demo10.tsx |  43 +-
 src/packages/button/demos/taro/demo2.tsx  |  17 +-
 src/packages/button/demos/taro/demo3.tsx  |   9 +-
 src/packages/button/demos/taro/demo4.tsx  | 130 +++++-
 src/packages/button/demos/taro/demo5.tsx  | 135 ++++++-
 src/packages/button/demos/taro/demo6.tsx  |  17 +-
 src/packages/button/demos/taro/demo7.tsx  |   7 +-
 src/packages/button/demos/taro/demo8.tsx  |  17 +-
 14 files changed, 1082 insertions(+), 182 deletions(-)
 create mode 100644 src/packages/button/button copy.scss

diff --git a/src/packages/button/button copy.scss b/src/packages/button/button copy.scss
new file mode 100644
index 0000000000..8ab1678945
--- /dev/null
+++ b/src/packages/button/button copy.scss	
@@ -0,0 +1,465 @@
+.nut-button {
+  position: relative;
+  display: flex;
+  display: inline-block;
+  width: auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: $button-default-height;
+  font-size: $button-default-font-size;
+  font-weight: $button-default-font-weight;
+  text-align: center;
+  cursor: pointer;
+  transition: $button-transition;
+  -webkit-appearance: none;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  color: $button-default-color;
+  background: $button-default-background-color;
+
+  &-text {
+    margin-left: $button-text-icon-margin;
+    &.right {
+      margin-right: $button-text-icon-margin;
+    }
+  }
+
+  &-children {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: $color-mask;
+    border: inherit;
+    border-color: $color-mask;
+    border-radius: inherit;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &::after {
+    border: none;
+  }
+
+  &:active::before {
+    opacity: 0.1;
+  }
+
+  &-wrap {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    /* #ifndef rn harmony */
+    background: initial;
+    /* #endif */
+
+    .nut-icon {
+      font-size: $button-default-font-size;
+      width: $button-default-font-size;
+      height: $button-default-font-size;
+    }
+  }
+
+  &-loading,
+  &-disabled {
+    &::before {
+      display: none;
+    }
+  }
+
+  &.nut-button-icononly {
+    width: $button-default-height;
+    padding: 0;
+  }
+
+  &-default {
+    padding: $button-default-padding;
+    background: transparent;
+    border-width: $button-border-width;
+    border-style: solid;
+    border-color: $button-default-border-color;
+
+    &-disabled {
+      color: $button-default-disabled-color;
+      border-color: $button-default-disabled;
+    }
+
+    &-none {
+      border-color: transparent;
+    }
+
+    &-dashed {
+      border-style: dashed;
+    }
+
+    &-outline,
+    &-dashed {
+      background: transparent;
+    }
+
+    &-solid-disabled,
+    &-outline-disabled,
+    &-dashed-disabled {
+      // border-color: $button-default-disabled;
+    }
+  }
+
+  &-normal {
+    padding: $button-normal-padding;
+  }
+
+  &-xlarge {
+    height: $button-xlarge-height;
+    padding: $button-xlarge-padding;
+    font-size: $button-xlarge-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-xlarge-font-size;
+      width: $button-xlarge-font-size;
+      height: $button-xlarge-font-size;
+    }
+  }
+
+  &-large {
+    height: $button-large-height;
+    padding: $button-large-padding;
+    font-size: $button-large-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-large-font-size;
+      width: $button-large-font-size;
+      height: $button-large-font-size;
+    }
+  }
+
+  &-small {
+    height: $button-small-height;
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
+
+    .nut-icon {
+      font-size: $button-small-font-size;
+      width: $button-small-font-size;
+      height: $button-small-font-size;
+    }
+  }
+
+  &-mini {
+    height: $button-mini-height;
+    padding: $button-mini-padding;
+    font-size: $button-mini-font-size;
+
+    .nut-icon {
+      font-size: $button-mini-font-size;
+      width: $button-mini-font-size;
+      height: $button-mini-font-size;
+    }
+  }
+
+  &-primary {
+    color: $button-primary-border-color;
+    background-origin: border-box;
+    border-width: $button-border-width;
+    border-style: solid;
+    border-color: $button-primary-border-color;
+
+    &-solid {
+      color: $button-primary-color;
+      background: $button-primary-background-color;
+      border-color: transparent;
+    }
+
+    &-dashed {
+      border-style: dashed;
+    }
+
+    &-none {
+      border-color: transparent;
+    }
+
+    // &-none-children, &-outline-children, &-dashed-children{
+    //   // color: $button-primary-border-color;
+    // }
+
+    &-disabled {
+      background: transparent;
+      color: $button-primary-disabled;
+      border-color: $button-primary-disabled;
+    }
+
+    &-solid-disabled {
+      color: $button-primary-color;
+      background: $button-primary-disabled;
+    }
+
+    &-none-disabled {
+      border-color: transparent;
+    }
+
+    // &-solid-disabled-children {
+    //   border-color: $button-primary-disabled;
+    // }
+
+    // &-outline-disabled-children {
+    //   color: $button-primary-disabled;
+    // }
+
+    // &-dashed-disabled-children {
+    //   color: $button-primary-disabled;
+    // }
+
+    // &-none-disabled-children {
+    //   color: $button-primary-disabled;
+    // }
+
+    // &-children {
+    //   // color: $button-primary-color;
+    // }
+  }
+
+  &-success {
+    color: $button-success-border-color;
+    background-origin: border-box;
+    border-width: $button-border-width;
+    border-style: solid;
+    border-color: $button-success-border-color;
+
+    &-solid {
+      color: $button-success-color;
+      background: $button-success-background-color;
+      border-color: transparent;
+    }
+
+    &-dashed {
+      border-style: dashed;
+    }
+
+    &-none {
+      border-color: transparent;
+    }
+
+    &-disabled {
+      background: transparent;
+      color: $button-success-disabled;
+      border-color: $button-success-disabled;
+    }
+
+    &-solid-disabled {
+      color: $button-success-color;
+      background: $button-success-disabled;
+    }
+
+    &-none-disabled {
+      border-color: transparent;
+    }
+  }
+
+  &-info {
+    color: $button-info-border-color;
+    background: transparent;
+    background-origin: border-box;
+    border-width: $button-border-width;
+    border-style: solid;
+    border-color: $button-info-border-color;
+
+    &-solid {
+      color: $button-info-color;
+      background: $button-info-background-color;
+      border-color: transparent;
+    }
+
+    &-dashed {
+      border-style: dashed;
+    }
+
+    &-none {
+      border-color: transparent;
+    }
+
+    &-disabled {
+      background: transparent;
+      color: $button-info-disabled;
+      border-color: $button-info-disabled;
+    }
+
+    &-solid-disabled {
+      color: $button-info-color;
+      background: $button-info-disabled;
+    }
+
+    &-none-disabled {
+      border-color: transparent;
+    }
+  }
+
+  &-danger {
+    color: $button-danger-border-color;
+    background-origin: border-box;
+    border-width: $button-border-width;
+    border-style: solid;
+    border-color: $button-danger-border-color;
+
+    &-solid {
+      color: $button-danger-color;
+      background: $button-danger-background-color;
+      border-color: transparent;
+    }
+
+    &-dashed {
+      border-style: dashed;
+    }
+
+    &-none {
+      border-color: transparent;
+    }
+
+    &-disabled {
+      background: transparent;
+      color: $button-danger-disabled;
+      border-color: $button-danger-disabled;
+    }
+
+    &-solid-disabled {
+      color: $button-danger-color;
+      background: $button-danger-disabled;
+    }
+
+    &-none-disabled {
+      border-color: transparent;
+    }
+  }
+
+  &-warning {
+    color: $button-warning-border-color;
+    background-origin: border-box;
+    border-width: $button-border-width;
+    border-style: solid;
+    border-color: $button-warning-border-color;
+
+    &-solid {
+      color: $button-warning-color;
+      background: $button-warning-background-color;
+      border-color: transparent;
+    }
+
+    &-dashed {
+      border-style: dashed;
+    }
+
+    &-none {
+      border-color: transparent;
+    }
+
+    &-disabled {
+      background: transparent;
+      color: $button-warning-disabled;
+      border-color: $button-warning-disabled;
+    }
+
+    &-solid-disabled {
+      color: $button-warning-color;
+      background: $button-warning-disabled;
+    }
+
+    &-none-disabled {
+      border-color: transparent;
+    }
+  }
+
+  &-block {
+    display: block;
+    width: 100%;
+  }
+
+  &-solid {
+    color: $button-primary-color;
+    background: $button-primary-background-color;
+    background-origin: border-box;
+    border: $button-border-width solid transparent;
+
+    &.nut-button-disabled {
+      color: $button-default-disabled-color;
+      background: $button-default-disabled;
+    }
+  }
+
+  &-outline,
+  &-dashed {
+    background: transparent;
+  }
+
+  &-none {
+    background: transparent;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    color: #ffffff;
+    background: $button-default-disabled;
+    border-color: $button-default-disabled;
+  }
+
+  &-loading {
+    cursor: default;
+    opacity: 0.9;
+  }
+
+  &-round {
+    border-radius: $button-border-radius;
+
+    &.nut-button-xlarge,
+    &.nut-button-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &.nut-button-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &.nut-button-mini {
+      border-radius: $button-mini-border-radius;
+    }
+  }
+
+  &-square {
+    border-radius: $button-square-border-radius;
+  }
+}
+
+[dir='rtl'] .nut-button,
+.nut-rtl .nut-button {
+  &-text {
+    margin-left: 0;
+    margin-right: $button-text-icon-margin;
+
+    &.right {
+      margin-left: $button-text-icon-margin;
+    }
+  }
+
+  &::before {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}
diff --git a/src/packages/button/button.harmony.css b/src/packages/button/button.harmony.css
index ecbe4c85b1..e3d2a07442 100644
--- a/src/packages/button/button.harmony.css
+++ b/src/packages/button/button.harmony.css
@@ -2,7 +2,12 @@
   position: relative;
   display: flex;
   display: inline-block;
+  /* #ifdef rn harmony*/
+  width: 80px;
+  /* #endif */
+  /* #ifndef rn harmony*/
   width: auto;
+  /* #endif */
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -22,17 +27,18 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: #1a1a1a;
   background: transparent;
+  border-width: 1px;
 }
 .nut-button-text {
-  color: #1a1a1a;
   margin-left: 4px;
 }
-.nut-button-text.right {
+.nut-button-text-right {
   margin-right: 4px;
 }
 .nut-button-children {
   display: flex;
   flex-direction: row;
+  background: transparent;
 }
 .nut-button::before {
   position: absolute;
@@ -79,27 +85,30 @@
 }
 .nut-button-default {
   padding: 0px 12px;
-  border: 1px solid #505259;
+  border-style: solid;
+  border-color: #505259;
 }
-.nut-button-default.nut-button-disabled {
-  color: #888b94;
-  background: transparent;
+.nut-button-default-disabled {
+  color: #ffffff;
+  background: #c2c4cc;
+  border-color: #c2c4cc;
 }
-.nut-button-default.nut-button-none {
-  background: transparent;
+.nut-button-default-solid-disabled {
+  color: #ffffff;
+  background: #c2c4cc;
+  border-color: #c2c4cc;
 }
-.nut-button-default.nut-button-none.nut-button-disabled {
+.nut-button-default-none-disabled {
   color: #888b94;
 }
-.nut-button-default.nut-button-outline, .nut-button-default.nut-button-dashed {
+.nut-button-default-outline-disabled {
   background: transparent;
-}
-.nut-button-default.nut-button-outline.nut-button-disabled {
-  color: #888b94;
+  color: #c2c4cc;
   border-color: #c2c4cc;
 }
-.nut-button-default.nut-button-dashed.nut-button-disabled {
-  color: #888b94;
+.nut-button-default-dashed-disabled {
+  background: transparent;
+  color: #c2c4cc;
   border-color: #c2c4cc;
 }
 .nut-button-normal {
@@ -116,6 +125,10 @@
   width: 24px;
   height: 24px;
 }
+.nut-button-xlarge-children {
+  font-size: 24px;
+  font-weight: 600;
+}
 .nut-button-large {
   height: 40px;
   padding: 0px 16px;
@@ -127,6 +140,10 @@
   width: 16px;
   height: 16px;
 }
+.nut-button-large-children {
+  font-size: 16px;
+  font-weight: 600;
+}
 .nut-button-small {
   height: 28px;
   padding: 0px 8px;
@@ -137,6 +154,9 @@
   width: 12px;
   height: 12px;
 }
+.nut-button-small-children {
+  font-size: 12px;
+}
 .nut-button-mini {
   height: 24px;
   padding: 0px 8px;
@@ -147,207 +167,219 @@
   width: 12px;
   height: 12px;
 }
+.nut-button-mini-children {
+  font-size: 12px;
+}
 .nut-button-primary {
   color: #ffffff;
   background: #ff0f23;
   background-origin: border-box;
-  border: 1px solid transparent;
+  border-color: transparent;
 }
-.nut-button-primary.nut-button-disabled {
+.nut-button-primary-children {
+  color: #ffffff;
+}
+.nut-button-primary-solid {
+  color: #ffffff;
+  border-color: transparent;
+}
+.nut-button-primary-disabled {
+  color: #ffffff;
   background: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-primary.nut-button-none {
-  background: transparent;
+.nut-button-primary-solid-disabled {
+  color: #ffffff;
+  background: #ffadbe;
+  border-color: #ffadbe;
+}
+.nut-button-primary-none {
   color: #ff0f23;
 }
-.nut-button-primary.nut-button-none.nut-button-disabled {
+.nut-button-primary-none-disabled {
   color: #ffadbe;
 }
-.nut-button-primary.nut-button-outline {
-  background: transparent;
+.nut-button-primary-outline {
   color: #ff0f23;
-  border: 1px solid #ff0f23;
+  border-color: #ff0f23;
 }
-.nut-button-primary.nut-button-outline.nut-button-disabled {
+.nut-button-primary-outline-disabled {
   color: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-primary.nut-button-dashed {
-  background: transparent;
+.nut-button-primary-dashed {
   color: #ff0f23;
-  border: 1px dashed #ff0f23;
+  border-color: #ff0f23;
 }
-.nut-button-primary.nut-button-dashed.nut-button-disabled {
+.nut-button-primary-dashed-disabled {
   color: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-primary-children {
-  color: #ffffff;
-}
 .nut-button-success {
   color: #ffffff;
   background: #2aa32a;
   background-origin: border-box;
-  border: 1px solid transparent;
+  border-color: transparent;
+}
+.nut-button-success-children {
+  color: #ffffff;
 }
-.nut-button-success.nut-button-disabled {
+.nut-button-success-solid-disabled {
   background: #b2f0ae;
   border-color: #b2f0ae;
 }
-.nut-button-success.nut-button-outline {
+.nut-button-success-outline {
   color: #2aa32a;
   border-color: #2aa32a;
-  background: transparent;
 }
-.nut-button-success.nut-button-dashed {
+.nut-button-success-dashed {
   color: #2aa32a;
   border-color: #2aa32a;
-  background: transparent;
 }
-.nut-button-success.nut-button-outline.nut-button-disabled {
+.nut-button-success-outline-disabled {
   color: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-success.nut-button-dashed.nut-button-disabled {
+.nut-button-success-dashed-disabled {
   color: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-success.nut-button-none {
+.nut-button-success-none {
   color: #2aa32a;
 }
-.nut-button-success-children {
-  color: #ffffff;
+.nut-button-success-none-disabled {
+  color: #b2f0ae;
 }
 .nut-button-info {
   color: #ffffff;
   background: #0073ff;
   background-origin: border-box;
-  border: 1px solid transparent;
+  border-color: transparent;
 }
-.nut-button-info.nut-button-disabled {
+.nut-button-info-children {
+  color: #ffffff;
+}
+.nut-button-info-solid-disabled {
   background: #89a6f8;
   border-color: #89a6f8;
 }
-.nut-button-info.nut-button-outline {
+.nut-button-info-outline {
   color: #1988fa;
   border-color: #1988fa;
-  background: transparent;
 }
-.nut-button-info.nut-button-dashed {
+.nut-button-info-dashed {
   color: #1988fa;
   border-color: #1988fa;
-  background: transparent;
 }
-.nut-button-info.nut-button-outline.nut-button-disabled {
-  color: #ffadbe;
-  border-color: #ffadbe;
+.nut-button-info-outline-disabled {
+  color: #89a6f8;
+  border-color: #89a6f8;
 }
-.nut-button-info.nut-button-dashed.nut-button-disabled {
-  color: #ffadbe;
-  border-color: #ffadbe;
+.nut-button-info-dashed-disabled {
+  color: #89a6f8;
+  border-color: #89a6f8;
 }
-.nut-button-info.nut-button-none {
+.nut-button-info-none {
   color: #1988fa;
 }
-.nut-button-info-children {
-  color: #ffffff;
+.nut-button-info-none-disabled {
+  color: #89a6f8;
 }
 .nut-button-danger {
   color: #ffffff;
   background: #ff0f23;
   background-origin: border-box;
-  border: 1px solid transparent;
+  border-color: transparent;
 }
-.nut-button-danger.nut-button-disabled {
+.nut-button-danger-children {
+  color: #ffffff;
+}
+.nut-button-danger-solid-disabled {
   background: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-danger.nut-button-outline {
+.nut-button-danger-outline {
   color: #ff0f23;
   border-color: #ff0f23;
-  background: transparent;
 }
-.nut-button-danger.nut-button-dashed {
+.nut-button-danger-dashed {
   color: #ff0f23;
   border-color: #ff0f23;
-  background: transparent;
 }
-.nut-button-danger.nut-button-outline.nut-button-disabled {
+.nut-button-danger-outline-disabled {
   color: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-danger.nut-button-dashed.nut-button-disabled {
+.nut-button-danger-dashed-disabled {
   color: #ffadbe;
   border-color: #ffadbe;
 }
-.nut-button-danger.nut-button-none {
+.nut-button-danger-none {
   color: #ff0f23;
 }
-.nut-button-danger-children {
-  color: #ffffff;
+.nut-button-danger-none-disabled {
+  color: #ffadbe;
 }
 .nut-button-warning {
   color: #ffffff;
   background: #c47600;
   background-origin: border-box;
-  border: 1px solid transparent;
+  border-color: transparent;
 }
-.nut-button-warning.nut-button-disabled {
+.nut-button-warning-children {
+  color: #ffffff;
+}
+.nut-button-warning-disabled {
+  color: #ffffff;
   background: #fdd3b9;
   border-color: #fdd3b9;
 }
-.nut-button-warning.nut-button-outline {
+.nut-button-warning-solid-disabled {
+  color: #ffffff;
+  background: #fdd3b9;
+  border-color: #fdd3b9;
+}
+.nut-button-warning-outline {
   color: #c47600;
   border-color: #c47600;
-  background: transparent;
 }
-.nut-button-warning.nut-button-dashed {
+.nut-button-warning-dashed {
   color: #c47600;
   border-color: #c47600;
-  background: transparent;
 }
-.nut-button-warning.nut-button-outline.nut-button-disabled {
+.nut-button-warning-outline-disabled {
   color: #fdd3b9;
   border-color: #fdd3b9;
 }
-.nut-button-warning.nut-button-dashed.nut-button-disabled {
+.nut-button-warning-dashed-disabled {
   color: #fdd3b9;
   border-color: #fdd3b9;
 }
-.nut-button-warning.nut-button-none {
+.nut-button-warning-none {
   color: #c47600;
 }
-.nut-button-warning-children {
-  color: #ffffff;
+.nut-button-warning-none-disabled {
+  color: #fdd3b9;
 }
 .nut-button-block {
   display: block;
   width: 100%;
 }
-.nut-button-solid {
-  color: #ffffff;
-  background: #ff0f23;
-  background-origin: border-box;
-  border: 1px solid transparent;
-}
-.nut-button-solid.nut-button-disabled {
-  color: #888b94;
-  background: #c2c4cc;
+.nut-button-outline {
+  background: transparent;
+  border-style: solid;
 }
-.nut-button.nut-button-outline, .nut-button.nut-button-dashed {
+.nut-button-dashed {
   background: transparent;
+  border-style: dashed;
 }
-.nut-button.nut-button-none {
+.nut-button-none {
   background: transparent;
   border-color: transparent;
-  background: transparent;
 }
 .nut-button-disabled {
   cursor: not-allowed;
   color: #ffffff;
-  background: #c2c4cc;
-  border-color: #c2c4cc;
 }
 .nut-button-loading {
   cursor: default;
@@ -356,16 +388,16 @@
 .nut-button-round {
   border-radius: 8px;
 }
-.nut-button-round.nut-button-xlarge {
+.nut-button-round-xlarge {
   border-radius: 12px;
 }
-.nut-button-round.nut-button-large {
+.nut-button-round-large {
   border-radius: 12px;
 }
-.nut-button-round.nut-button-small {
+.nut-button-round-small {
   border-radius: 8px;
 }
-.nut-button-round.nut-button-mini {
+.nut-button-round-mini {
   border-radius: 6px;
 }
 .nut-button-square {
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index a795b28b3e..5f0dc8e9b7 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -2,7 +2,12 @@
   position: relative;
   display: flex;
   display: inline-block;
+  /* #ifdef rn harmony*/
+  width: 80px;
+  /* #endif */
+  /* #ifndef rn harmony*/
   width: auto;
+  /* #endif */
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -26,7 +31,7 @@
 
   &-text {
     margin-left: $button-text-icon-margin;
-    &.right {
+    &-right {
       margin-right: $button-text-icon-margin;
     }
   }
@@ -34,6 +39,7 @@
   &-children {
     display: flex;
     flex-direction: row;
+    background: transparent;
   }
 
   &::before {
@@ -93,15 +99,22 @@
     border-style: solid;
     border-color: $button-default-border-color;
 
-    &.nut-button-none {
-      &.nut-button-disabled {
+    &-disabled,
+    &-solid-disabled {
+      color: $button-primary-color;
+      background: $button-default-disabled;
+      border-color: $button-default-disabled;
+    }
+
+    &-none {
+      &-disabled {
         color: $button-default-disabled-color;
       }
     }
 
-    &.nut-button-outline,
-    &.nut-button-dashed {
-      &.nut-button-disabled {
+    &-outline,
+    &-dashed {
+      &-disabled {
         background: transparent;
         color: $button-default-disabled;
         border-color: $button-default-disabled;
@@ -124,6 +137,10 @@
       width: $button-xlarge-font-size;
       height: $button-xlarge-font-size;
     }
+    &-children {
+      font-size: $button-xlarge-font-size;
+      font-weight: $button-large-font-weight;
+    }
   }
 
   &-large {
@@ -137,6 +154,11 @@
       width: $button-large-font-size;
       height: $button-large-font-size;
     }
+
+    &-children {
+      font-size: $button-large-font-size;
+      font-weight: $button-large-font-weight;
+    }
   }
 
   &-small {
@@ -149,6 +171,10 @@
       width: $button-small-font-size;
       height: $button-small-font-size;
     }
+
+    &-children {
+      font-size: $button-small-font-size;
+    }
   }
 
   &-mini {
@@ -161,6 +187,10 @@
       width: $button-mini-font-size;
       height: $button-mini-font-size;
     }
+
+    &-children {
+      font-size: $button-mini-font-size;
+    }
   }
 
   &-primary {
@@ -169,34 +199,45 @@
     background-origin: border-box;
     border-color: transparent;
 
-    &.nut-button-disabled {
+    &-children {
+      color: $button-primary-color;
+    }
+
+    &-solid {
+      color: $button-primary-color;
+      border-color: transparent;
+    }
+
+    &-disabled,
+    &-solid-disabled {
+      color: $button-primary-color;
       background: $button-primary-disabled;
       border-color: $button-primary-disabled;
     }
 
-    &.nut-button-none {
+    &-none {
       color: $button-primary-border-color;
 
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-primary-disabled;
       }
     }
 
-    &.nut-button-outline {
+    &-outline {
       color: $button-primary-border-color;
       border-color: $button-primary-border-color;
 
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-primary-disabled;
         border-color: $button-primary-disabled;
       }
     }
 
-    &.nut-button-dashed {
+    &-dashed {
       color: $button-primary-border-color;
       border-color: $button-primary-border-color;
 
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-primary-disabled;
         border-color: $button-primary-disabled;
       }
@@ -209,25 +250,29 @@
     background-origin: border-box;
     border-color: transparent;
 
-    &.nut-button-disabled {
+    &-children {
+      color: $button-success-color;
+    }
+
+    &-solid-disabled {
       background: $button-success-disabled;
       border-color: $button-success-disabled;
     }
 
-    &.nut-button-outline,
-    &.nut-button-dashed {
+    &-outline,
+    &-dashed {
       color: $button-success-border-color;
       border-color: $button-success-border-color;
 
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-primary-disabled;
         border-color: $button-primary-disabled;
       }
     }
 
-    &.nut-button-none {
+    &-none {
       color: $button-success-border-color;
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-success-disabled;
       }
     }
@@ -239,25 +284,29 @@
     background-origin: border-box;
     border-color: transparent;
 
-    &.nut-button-disabled {
+    &-children {
+      color: $button-info-color;
+    }
+
+    &-solid-disabled {
       background: $button-info-disabled;
       border-color: $button-info-disabled;
     }
 
-    &.nut-button-outline,
-    &.nut-button-dashed {
+    &-outline,
+    &-dashed {
       color: $button-info-border-color;
       border-color: $button-info-border-color;
 
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-info-disabled;
         border-color: $button-info-disabled;
       }
     }
 
-    &.nut-button-none {
+    &-none {
       color: $button-info-border-color;
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-info-disabled;
       }
     }
@@ -269,25 +318,29 @@
     background-origin: border-box;
     border-color: transparent;
 
-    &.nut-button-disabled {
+    &-children {
+      color: $button-danger-color;
+    }
+
+    &-solid-disabled {
       background: $button-danger-disabled;
       border-color: $button-danger-disabled;
     }
 
-    &.nut-button-outline,
-    &.nut-button-dashed {
+    &-outline,
+    &-dashed {
       color: $button-danger-border-color;
       border-color: $button-danger-border-color;
 
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-danger-disabled;
         border-color: $button-danger-disabled;
       }
     }
 
-    &.nut-button-none {
+    &-none {
       color: $button-danger-border-color;
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-danger-disabled;
       }
     }
@@ -299,25 +352,31 @@
     background-origin: border-box;
     border-color: transparent;
 
-    &.nut-button-disabled {
+    &-children {
+      color: $button-warning-color;
+    }
+
+    &-disabled,
+    &-solid-disabled {
+      color: $button-warning-color;
       background: $button-warning-disabled;
       border-color: $button-warning-disabled;
     }
 
-    &.nut-button-outline,
-    &.nut-button-dashed {
+    &-outline,
+    &-dashed {
       color: $button-warning-border-color;
       border-color: $button-warning-border-color;
 
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-warning-disabled;
         border-color: $button-warning-disabled;
       }
     }
 
-    &.nut-button-none {
+    &-none {
       color: $button-warning-border-color;
-      &.nut-button-disabled {
+      &-disabled {
         color: $button-warning-disabled;
       }
     }
@@ -328,17 +387,17 @@
     width: 100%;
   }
 
-  &.nut-button-outline {
+  &-outline {
     background: transparent;
     border-style: solid;
   }
 
-  &.nut-button-dashed {
+  &-dashed {
     background: transparent;
     border-style: dashed;
   }
 
-  &.nut-button-none {
+  &-none {
     background: transparent;
     border-color: transparent;
   }
@@ -346,8 +405,6 @@
   &-disabled {
     cursor: not-allowed;
     color: #ffffff;
-    background: $button-default-disabled;
-    border-color: $button-default-disabled;
   }
 
   &-loading {
@@ -358,16 +415,16 @@
   &-round {
     border-radius: $button-border-radius;
 
-    &.nut-button-xlarge,
-    &.nut-button-large {
+    &-xlarge,
+    &-large {
       border-radius: $button-large-border-radius;
     }
 
-    &.nut-button-small {
+    &-small {
       border-radius: $button-small-border-radius;
     }
 
-    &.nut-button-mini {
+    &-mini {
       border-radius: $button-mini-border-radius;
     }
   }
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index b34111a0ba..b5f386dbbd 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -93,7 +93,28 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           }
         } else {
           style.color = '#fff'
-          style.background = color
+          if (harmonyAndRn()) {
+            style.backgroundColor = color
+          } else {
+            style.background = color
+          }
+          style.borderColor = 'transparent'
+        }
+      }
+      return style
+    }, [color])
+
+    const getContStyle = useCallback(() => {
+      const style: CSSProperties = {}
+      if (props.color) {
+        if (props.fill === 'outline' || props.fill === 'dashed') {
+          style.color = color
+          if (!color?.includes('gradient')) {
+            style.borderColor = color
+          }
+        } else {
+          style.color = '#fff'
+          style.background = 'transparent'
           style.borderColor = 'transparent'
         }
       }
@@ -120,12 +141,16 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           prefixCls,
           `${prefixCls}-${type}`,
           props.fill ? `${prefixCls}-${fill}` : null,
+          props.fill ? `${prefixCls}-${type}-${fill}` : null,
           children ? '' : `${prefixCls}-icononly`,
           {
             [`${prefixCls}-${size}`]: size,
             [`${prefixCls}-${shape}`]: shape,
+            [`${prefixCls}-${shape}-${size}`]: shape && size,
             [`${prefixCls}-block`]: block,
             [`${prefixCls}-disabled`]: disabled || loading,
+            [`${prefixCls}-${type}${props.fill ? `-${fill}` : ''}-disabled`]:
+              disabled || loading,
             [`${prefixCls}-loading`]: loading,
           },
           className
@@ -140,9 +165,10 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           {!loading && icon ? icon : null}
           {children && (
             <View
-              className={`nut-button-children ${icon || loading ? 'nut-button-text' : ''}${
-                rightIcon ? ' nut-button-text right' : ''
+              className={`nut-button-children nut-button-${size}-children nut-button-${type}-children ${!(props.fill || disabled || loading) ? '' : `nut-button-${type}${props.fill ? `-${fill}` : ''}${disabled || loading ? '-disabled' : ''}`} ${icon || loading ? `nut-button-text` : ''}${
+                rightIcon ? ` nut-button-text-right` : ''
               }`}
+              style={harmonyAndRn() ? getContStyle() : ''}
             >
               {children}
             </View>
diff --git a/src/packages/button/button.tsx b/src/packages/button/button.tsx
index d2b85f78b5..6bf93c62bc 100644
--- a/src/packages/button/button.tsx
+++ b/src/packages/button/button.tsx
@@ -103,12 +103,15 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           prefixCls,
           `${prefixCls}-${type}`,
           props.fill ? `${prefixCls}-${fill}` : null,
+          props.fill ? `${prefixCls}-${type}-${fill}` : null,
           children ? '' : `${prefixCls}-icononly`,
           {
             [`${prefixCls}-${size}`]: size,
             [`${prefixCls}-${shape}`]: shape,
             [`${prefixCls}-block`]: block,
             [`${prefixCls}-disabled`]: disabled || loading,
+            [`${prefixCls}-${type}${props.fill ? `-${fill}` : ''}-disabled`]:
+              disabled || loading,
             [`${prefixCls}-loading`]: loading,
           },
           className
@@ -121,8 +124,8 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           {!loading && icon ? icon : null}
           {children && (
             <div
-              className={`${icon || loading ? 'nut-button-text' : ''}${
-                rightIcon ? ' nut-button-text right' : ''
+              className={` ${props.fill || disabled || loading ? `nut-button-${type}${props.fill ? `-${fill}` : ''}${disabled || loading ? '-disabled' : ''}` : ''} ${icon || loading ? 'nut-button-text' : ''}${
+                rightIcon ? ' nut-button-text-right' : ''
               }`}
             >
               {children}
diff --git a/src/packages/button/demo.taro.tsx b/src/packages/button/demo.taro.tsx
index f274381215..0580ccc197 100644
--- a/src/packages/button/demo.taro.tsx
+++ b/src/packages/button/demo.taro.tsx
@@ -13,6 +13,7 @@ import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const ButtonDemo = () => {
   const [translated] = useTranslate({
@@ -57,8 +58,13 @@ const ButtonDemo = () => {
     <>
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <View className="h2">设置 open-type </View>
-        <Demo1 />
+        {!harmonyAndRn() ? (
+          <>
+            <View className="h2">设置 open-type </View>
+            <Demo1 />
+          </>
+        ) : null}
+
         <View className="h2">{translated.ce5c5446}</View>
         <Demo2 />
         <View className="h2">{translated.e51e4582}</View>
diff --git a/src/packages/button/demos/taro/demo10.tsx b/src/packages/button/demos/taro/demo10.tsx
index bc634c71fd..2e143dcf93 100644
--- a/src/packages/button/demos/taro/demo10.tsx
+++ b/src/packages/button/demos/taro/demo10.tsx
@@ -1,41 +1,38 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const App = () => {
-  const marginStyle = { margin: 8 }
+  const marginStyle = harmonyAndRn()
+    ? {
+        width: pxTransform(120),
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
+    : {
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
-      <Button
-        color="blue"
-        style={{
-          margin: 8,
-        }}
-      >
+      <Button color="blue" style={marginStyle}>
         单色按钮
       </Button>
-      <Button
-        fill="outline"
-        color="#7232dd"
-        style={{
-          margin: 8,
-        }}
-      >
+      <Button fill="outline" color="#7232dd" style={marginStyle}>
         单色按钮
       </Button>
-      <Button
-        color="rgba(10,101,208,0.75)"
-        style={{
-          margin: 8,
-        }}
-      >
+      <Button color="rgba(10,101,208,0.75)" style={marginStyle}>
         单色按钮
       </Button>
       <Button
         type="primary"
         color="linear-gradient(to right, #ff6034, #ee0a24)"
-        style={{
-          margin: 8,
-        }}
+        style={marginStyle}
       >
         渐变按钮
       </Button>
diff --git a/src/packages/button/demos/taro/demo2.tsx b/src/packages/button/demos/taro/demo2.tsx
index c820b72cb3..b484e079bd 100644
--- a/src/packages/button/demos/taro/demo2.tsx
+++ b/src/packages/button/demos/taro/demo2.tsx
@@ -1,8 +1,23 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
-  const marginStyle = { margin: 8 }
+  const marginStyle = harmonyAndRn()
+    ? {
+        width: pxTransform(100),
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
+    : {
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" style={marginStyle}>
diff --git a/src/packages/button/demos/taro/demo3.tsx b/src/packages/button/demos/taro/demo3.tsx
index 96a4379f85..3022ff1173 100644
--- a/src/packages/button/demos/taro/demo3.tsx
+++ b/src/packages/button/demos/taro/demo3.tsx
@@ -1,8 +1,15 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
-  const marginStyle = { margin: 8 }
+  const marginStyle = {
+    width: pxTransform(80),
+    marginRight: 8,
+    marginTop: 8,
+    marginLeft: 8,
+    marginBottom: 8,
+  }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" fill="solid" style={marginStyle}>
diff --git a/src/packages/button/demos/taro/demo4.tsx b/src/packages/button/demos/taro/demo4.tsx
index 360d180a9c..941d564979 100644
--- a/src/packages/button/demos/taro/demo4.tsx
+++ b/src/packages/button/demos/taro/demo4.tsx
@@ -2,9 +2,15 @@ import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
 import { Star, Plus } from '@nutui/icons-react-taro'
 import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
-  const marginStyle = { margin: 8 }
+  const marginStyle = {
+    marginRight: 8,
+    marginTop: 8,
+    marginLeft: 8,
+    marginBottom: 8,
+  }
   return (
     <>
       {!harmonyAndRn() ? (
@@ -123,7 +129,127 @@ const Demo4 = () => {
             Button
           </Button>
         </Cell>
-      ) : null}
+      ) : (
+        <Cell style={{ flexWrap: 'wrap' }}>
+          <Button
+            type="primary"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Button
+          </Button>
+          <Button
+            type="primary"
+            fill="outline"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Button
+          </Button>
+          <Button
+            type="primary"
+            fill="dashed"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Button
+          </Button>
+          <Button
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{
+              ...{
+                backgroundColor: `#ffebf1`,
+                borderColor: `#ff0f23`,
+                color: `#ff0f23`,
+              },
+              ...marginStyle,
+            }}
+          >
+            Button
+          </Button>
+          <Button
+            type="default"
+            fill="none"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{
+              ...{
+                backgroundColor: `#f5f6fa`,
+                color: `#1a1a1a`,
+              },
+              ...marginStyle,
+            }}
+          >
+            Button
+          </Button>
+          <Button
+            type="default"
+            fill="none"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{
+              ...{
+                backgroundColor: `#ffffff`,
+                color: `#1a1a1a`,
+              },
+              ...marginStyle,
+            }}
+          >
+            Button
+          </Button>
+          <Button
+            type="default"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Button
+          </Button>
+          <Button
+            shape="square"
+            fill="outline"
+            type="primary"
+            // icon={<Plus />}
+            style={{ width: pxTransform(32), ...marginStyle }}
+          />
+          <Button
+            fill="outline"
+            type="primary"
+            // icon={<Plus />}
+            style={{ width: pxTransform(32), ...marginStyle }}
+          />
+          <Button
+            type="primary"
+            fill="dashed"
+            // icon={<Plus />}
+            style={{ width: pxTransform(32), ...marginStyle }}
+          />
+          <Button
+            shape="round"
+            type="primary"
+            size="large"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{ width: pxTransform(100), ...marginStyle }}
+          >
+            Button
+          </Button>
+          <Button
+            shape="round"
+            type="primary"
+            size="xlarge"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{ width: pxTransform(200), ...marginStyle }}
+          >
+            Button
+          </Button>
+        </Cell>
+      )}
     </>
   )
 }
diff --git a/src/packages/button/demos/taro/demo5.tsx b/src/packages/button/demos/taro/demo5.tsx
index c50234cc7a..8bc6a01f71 100644
--- a/src/packages/button/demos/taro/demo5.tsx
+++ b/src/packages/button/demos/taro/demo5.tsx
@@ -2,9 +2,16 @@ import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
 import { Star, Plus } from '@nutui/icons-react-taro'
 import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
-  const marginStyle = { margin: 8 }
+  const marginStyle = {
+    width: pxTransform(100),
+    marginRight: 8,
+    marginTop: 8,
+    marginLeft: 8,
+    marginBottom: 8,
+  }
   return (
     <>
       {!harmonyAndRn() ? (
@@ -129,7 +136,131 @@ const Demo5 = () => {
             Disabled
           </Button>
         </Cell>
-      ) : null}
+      ) : (
+        <Cell style={{ flexWrap: 'wrap' }}>
+          <Button
+            disabled
+            type="primary"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            type="primary"
+            fill="outline"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            type="primary"
+            fill="dashed"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            fill="solid"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            type="default"
+            fill="none"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{
+              ...{
+                backgroundColor: `#f6f6f6`,
+                color: `#888b94`,
+              },
+              ...marginStyle,
+            }}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            type="default"
+            fill="none"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{
+              ...{
+                backgroundColor: `#ffffff`,
+                color: `#888b94`,
+              },
+              ...marginStyle,
+            }}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={marginStyle}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            shape="square"
+            fill="outline"
+            type="primary"
+            // icon={<Plus size="20" />}
+            style={{ width: pxTransform(32), ...marginStyle }}
+          />
+          <Button
+            disabled
+            type="primary"
+            // icon={<Plus size="20" />}
+            style={{ width: pxTransform(32), ...marginStyle }}
+          />
+          <Button
+            disabled
+            type="primary"
+            fill="dashed"
+            // icon={<Plus />}
+            style={{ width: pxTransform(32), ...marginStyle }}
+          />
+          <Button
+            disabled
+            shape="round"
+            type="primary"
+            size="large"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{ width: pxTransform(120), ...marginStyle }}
+          >
+            Disabled
+          </Button>
+          <Button
+            disabled
+            shape="round"
+            type="primary"
+            size="xlarge"
+            // icon={<Star />}
+            // rightIcon={<Star />}
+            style={{ width: pxTransform(200), ...marginStyle }}
+          >
+            Disabled
+          </Button>
+        </Cell>
+      )}
     </>
   )
 }
diff --git a/src/packages/button/demos/taro/demo6.tsx b/src/packages/button/demos/taro/demo6.tsx
index fb85f03551..30a1290b07 100644
--- a/src/packages/button/demos/taro/demo6.tsx
+++ b/src/packages/button/demos/taro/demo6.tsx
@@ -1,8 +1,23 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo6 = () => {
-  const marginStyle = { margin: 8 }
+  const marginStyle = harmonyAndRn()
+    ? {
+        width: pxTransform(150),
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
+    : {
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button shape="square" type="primary" style={marginStyle}>
diff --git a/src/packages/button/demos/taro/demo7.tsx b/src/packages/button/demos/taro/demo7.tsx
index 3127178cbc..c6a53020a1 100644
--- a/src/packages/button/demos/taro/demo7.tsx
+++ b/src/packages/button/demos/taro/demo7.tsx
@@ -3,7 +3,12 @@ import { Button, Cell } from '@nutui/nutui-react-taro'
 
 const Demo7 = () => {
   const [loading, setLoading] = useState(false)
-  const marginStyle = { margin: 8 }
+  const marginStyle = {
+    marginRight: 8,
+    marginTop: 8,
+    marginLeft: 8,
+    marginBottom: 8,
+  }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button loading type="warning" style={marginStyle}>
diff --git a/src/packages/button/demos/taro/demo8.tsx b/src/packages/button/demos/taro/demo8.tsx
index 1dd5d37221..af69954ba9 100644
--- a/src/packages/button/demos/taro/demo8.tsx
+++ b/src/packages/button/demos/taro/demo8.tsx
@@ -1,8 +1,23 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo8 = () => {
-  const marginStyle = { margin: 8 }
+  const marginStyle = harmonyAndRn()
+    ? {
+        width: pxTransform(140),
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
+    : {
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" style={marginStyle}>

From efe5e6522c12e196a00a19fbc0476463284691c8 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Tue, 25 Jun 2024 09:33:40 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20outline=20=E5=92=8C=20dashed=20?=
 =?UTF-8?q?=E5=9C=A8=20=E9=B8=BF=E8=92=99=E4=B8=8B=20transparent=20?=
 =?UTF-8?q?=E4=B8=8D=E7=94=9F=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/button/button.harmony.css   |  2 +-
 src/packages/button/button.scss          |  2 +-
 src/packages/button/button.taro.tsx      |  6 ++++--
 src/packages/button/button.tsx           |  3 +++
 src/packages/button/demos/taro/demo2.tsx |  6 +++---
 src/packages/button/demos/taro/demo5.tsx | 15 ++++++++-------
 src/packages/button/demos/taro/demo6.tsx |  4 ++--
 src/packages/button/demos/taro/demo7.tsx |  3 +++
 src/packages/button/demos/taro/demo8.tsx | 17 ++++++++++++++++-
 9 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/packages/button/button.harmony.css b/src/packages/button/button.harmony.css
index e3d2a07442..8b87874322 100644
--- a/src/packages/button/button.harmony.css
+++ b/src/packages/button/button.harmony.css
@@ -172,7 +172,6 @@
 }
 .nut-button-primary {
   color: #ffffff;
-  background: #ff0f23;
   background-origin: border-box;
   border-color: transparent;
 }
@@ -180,6 +179,7 @@
   color: #ffffff;
 }
 .nut-button-primary-solid {
+  background: #ff0f23;
   color: #ffffff;
   border-color: transparent;
 }
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 5f0dc8e9b7..98fcf81660 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -195,7 +195,6 @@
 
   &-primary {
     color: $button-primary-color;
-    background: $button-primary-background-color;
     background-origin: border-box;
     border-color: transparent;
 
@@ -204,6 +203,7 @@
     }
 
     &-solid {
+      background: $button-primary-background-color;
       color: $button-primary-color;
       border-color: transparent;
     }
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index b5f386dbbd..ccfc555ed8 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -95,9 +95,8 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           style.color = '#fff'
           if (harmonyAndRn()) {
             style.backgroundColor = color
-          } else {
-            style.background = color
           }
+          style.background = color
           style.borderColor = 'transparent'
         }
       }
@@ -140,6 +139,9 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         className={classNames(
           prefixCls,
           `${prefixCls}-${type}`,
+          type === 'primary' && !props.fill
+            ? `${prefixCls}-${type}-solid`
+            : null,
           props.fill ? `${prefixCls}-${fill}` : null,
           props.fill ? `${prefixCls}-${type}-${fill}` : null,
           children ? '' : `${prefixCls}-icononly`,
diff --git a/src/packages/button/button.tsx b/src/packages/button/button.tsx
index 6bf93c62bc..65e794472f 100644
--- a/src/packages/button/button.tsx
+++ b/src/packages/button/button.tsx
@@ -102,6 +102,9 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         className={classNames(
           prefixCls,
           `${prefixCls}-${type}`,
+          type === 'primary' && !props.fill
+            ? `${prefixCls}-${type}-solid`
+            : null,
           props.fill ? `${prefixCls}-${fill}` : null,
           props.fill ? `${prefixCls}-${type}-${fill}` : null,
           children ? '' : `${prefixCls}-icononly`,
diff --git a/src/packages/button/demos/taro/demo2.tsx b/src/packages/button/demos/taro/demo2.tsx
index b484e079bd..cfac1c6970 100644
--- a/src/packages/button/demos/taro/demo2.tsx
+++ b/src/packages/button/demos/taro/demo2.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { harmony } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
-  const marginStyle = harmonyAndRn()
+  const marginStyle = harmony()
     ? {
-        width: pxTransform(100),
+        width: pxTransform(90),
         marginRight: 8,
         marginTop: 8,
         marginLeft: 8,
diff --git a/src/packages/button/demos/taro/demo5.tsx b/src/packages/button/demos/taro/demo5.tsx
index 8bc6a01f71..156aec9595 100644
--- a/src/packages/button/demos/taro/demo5.tsx
+++ b/src/packages/button/demos/taro/demo5.tsx
@@ -1,12 +1,11 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
 import { Star, Plus } from '@nutui/icons-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { harmonyAndRn, harmony } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   const marginStyle = {
-    width: pxTransform(100),
     marginRight: 8,
     marginTop: 8,
     marginLeft: 8,
@@ -143,7 +142,7 @@ const Demo5 = () => {
             type="primary"
             // icon={<Star />}
             // rightIcon={<Star />}
-            style={marginStyle}
+            style={{ width: pxTransform(harmony() ? 100 : 80), ...marginStyle }}
           >
             Disabled
           </Button>
@@ -153,7 +152,7 @@ const Demo5 = () => {
             fill="outline"
             // icon={<Star />}
             // rightIcon={<Star />}
-            style={marginStyle}
+            style={{ width: pxTransform(harmony() ? 100 : 80), ...marginStyle }}
           >
             Disabled
           </Button>
@@ -163,7 +162,7 @@ const Demo5 = () => {
             fill="dashed"
             // icon={<Star />}
             // rightIcon={<Star />}
-            style={marginStyle}
+            style={{ width: pxTransform(harmony() ? 100 : 80), ...marginStyle }}
           >
             Disabled
           </Button>
@@ -172,7 +171,7 @@ const Demo5 = () => {
             fill="solid"
             // icon={<Star />}
             // rightIcon={<Star />}
-            style={marginStyle}
+            style={{ width: pxTransform(harmony() ? 100 : 80), ...marginStyle }}
           >
             Disabled
           </Button>
@@ -186,6 +185,7 @@ const Demo5 = () => {
               ...{
                 backgroundColor: `#f6f6f6`,
                 color: `#888b94`,
+                width: pxTransform(harmony() ? 100 : 80),
               },
               ...marginStyle,
             }}
@@ -202,6 +202,7 @@ const Demo5 = () => {
               ...{
                 backgroundColor: `#ffffff`,
                 color: `#888b94`,
+                width: pxTransform(harmony() ? 100 : 80),
               },
               ...marginStyle,
             }}
@@ -212,7 +213,7 @@ const Demo5 = () => {
             disabled
             // icon={<Star />}
             // rightIcon={<Star />}
-            style={marginStyle}
+            style={{ width: pxTransform(harmony() ? 100 : 80), ...marginStyle }}
           >
             Disabled
           </Button>
diff --git a/src/packages/button/demos/taro/demo6.tsx b/src/packages/button/demos/taro/demo6.tsx
index 30a1290b07..72b1740ac2 100644
--- a/src/packages/button/demos/taro/demo6.tsx
+++ b/src/packages/button/demos/taro/demo6.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { harmonyAndRn, rn } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo6 = () => {
   const marginStyle = harmonyAndRn()
     ? {
-        width: pxTransform(150),
+        width: pxTransform(rn() ? 120 : 150),
         marginRight: 8,
         marginTop: 8,
         marginLeft: 8,
diff --git a/src/packages/button/demos/taro/demo7.tsx b/src/packages/button/demos/taro/demo7.tsx
index c6a53020a1..0674160fda 100644
--- a/src/packages/button/demos/taro/demo7.tsx
+++ b/src/packages/button/demos/taro/demo7.tsx
@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
+import { rn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo7 = () => {
   const [loading, setLoading] = useState(false)
   const marginStyle = {
+    width: pxTransform(rn() ? 90 : 120),
     marginRight: 8,
     marginTop: 8,
     marginLeft: 8,
diff --git a/src/packages/button/demos/taro/demo8.tsx b/src/packages/button/demos/taro/demo8.tsx
index af69954ba9..bb9fbeaf12 100644
--- a/src/packages/button/demos/taro/demo8.tsx
+++ b/src/packages/button/demos/taro/demo8.tsx
@@ -5,6 +5,21 @@ import pxTransform from '@/utils/px-transform'
 
 const Demo8 = () => {
   const marginStyle = harmonyAndRn()
+    ? {
+        width: pxTransform(90),
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
+    : {
+        marginRight: 8,
+        marginTop: 8,
+        marginLeft: 8,
+        marginBottom: 8,
+      }
+
+  const marginStyleXL = harmonyAndRn()
     ? {
         width: pxTransform(140),
         marginRight: 8,
@@ -33,7 +48,7 @@ const Demo8 = () => {
       <Button size="large" type="primary" style={marginStyle}>
         Large
       </Button>
-      <Button size="xlarge" type="primary" style={marginStyle}>
+      <Button size="xlarge" type="primary" style={marginStyleXL}>
         XLarge
       </Button>
     </Cell>

From e83ee5216374e68164a9f8afded78d90558865e8 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Tue, 25 Jun 2024 09:36:49 +0800
Subject: [PATCH 3/5] fix: delete copy file

---
 src/packages/button/button copy.scss | 465 ---------------------------
 1 file changed, 465 deletions(-)
 delete mode 100644 src/packages/button/button copy.scss

diff --git a/src/packages/button/button copy.scss b/src/packages/button/button copy.scss
deleted file mode 100644
index 8ab1678945..0000000000
--- a/src/packages/button/button copy.scss	
+++ /dev/null
@@ -1,465 +0,0 @@
-.nut-button {
-  position: relative;
-  display: flex;
-  display: inline-block;
-  width: auto;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  height: $button-default-height;
-  font-size: $button-default-font-size;
-  font-weight: $button-default-font-weight;
-  text-align: center;
-  cursor: pointer;
-  transition: $button-transition;
-  -webkit-appearance: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: $button-default-color;
-  background: $button-default-background-color;
-
-  &-text {
-    margin-left: $button-text-icon-margin;
-    &.right {
-      margin-right: $button-text-icon-margin;
-    }
-  }
-
-  &-children {
-    display: flex;
-    flex-direction: row;
-  }
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    background-color: $color-mask;
-    border: inherit;
-    border-color: $color-mask;
-    border-radius: inherit;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    content: ' ';
-  }
-
-  &::after {
-    border: none;
-  }
-
-  &:active::before {
-    opacity: 0.1;
-  }
-
-  &-wrap {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    /* #ifndef rn harmony */
-    background: initial;
-    /* #endif */
-
-    .nut-icon {
-      font-size: $button-default-font-size;
-      width: $button-default-font-size;
-      height: $button-default-font-size;
-    }
-  }
-
-  &-loading,
-  &-disabled {
-    &::before {
-      display: none;
-    }
-  }
-
-  &.nut-button-icononly {
-    width: $button-default-height;
-    padding: 0;
-  }
-
-  &-default {
-    padding: $button-default-padding;
-    background: transparent;
-    border-width: $button-border-width;
-    border-style: solid;
-    border-color: $button-default-border-color;
-
-    &-disabled {
-      color: $button-default-disabled-color;
-      border-color: $button-default-disabled;
-    }
-
-    &-none {
-      border-color: transparent;
-    }
-
-    &-dashed {
-      border-style: dashed;
-    }
-
-    &-outline,
-    &-dashed {
-      background: transparent;
-    }
-
-    &-solid-disabled,
-    &-outline-disabled,
-    &-dashed-disabled {
-      // border-color: $button-default-disabled;
-    }
-  }
-
-  &-normal {
-    padding: $button-normal-padding;
-  }
-
-  &-xlarge {
-    height: $button-xlarge-height;
-    padding: $button-xlarge-padding;
-    font-size: $button-xlarge-font-size;
-    font-weight: $button-large-font-weight;
-
-    .nut-icon {
-      font-size: $button-xlarge-font-size;
-      width: $button-xlarge-font-size;
-      height: $button-xlarge-font-size;
-    }
-  }
-
-  &-large {
-    height: $button-large-height;
-    padding: $button-large-padding;
-    font-size: $button-large-font-size;
-    font-weight: $button-large-font-weight;
-
-    .nut-icon {
-      font-size: $button-large-font-size;
-      width: $button-large-font-size;
-      height: $button-large-font-size;
-    }
-  }
-
-  &-small {
-    height: $button-small-height;
-    padding: $button-small-padding;
-    font-size: $button-small-font-size;
-
-    .nut-icon {
-      font-size: $button-small-font-size;
-      width: $button-small-font-size;
-      height: $button-small-font-size;
-    }
-  }
-
-  &-mini {
-    height: $button-mini-height;
-    padding: $button-mini-padding;
-    font-size: $button-mini-font-size;
-
-    .nut-icon {
-      font-size: $button-mini-font-size;
-      width: $button-mini-font-size;
-      height: $button-mini-font-size;
-    }
-  }
-
-  &-primary {
-    color: $button-primary-border-color;
-    background-origin: border-box;
-    border-width: $button-border-width;
-    border-style: solid;
-    border-color: $button-primary-border-color;
-
-    &-solid {
-      color: $button-primary-color;
-      background: $button-primary-background-color;
-      border-color: transparent;
-    }
-
-    &-dashed {
-      border-style: dashed;
-    }
-
-    &-none {
-      border-color: transparent;
-    }
-
-    // &-none-children, &-outline-children, &-dashed-children{
-    //   // color: $button-primary-border-color;
-    // }
-
-    &-disabled {
-      background: transparent;
-      color: $button-primary-disabled;
-      border-color: $button-primary-disabled;
-    }
-
-    &-solid-disabled {
-      color: $button-primary-color;
-      background: $button-primary-disabled;
-    }
-
-    &-none-disabled {
-      border-color: transparent;
-    }
-
-    // &-solid-disabled-children {
-    //   border-color: $button-primary-disabled;
-    // }
-
-    // &-outline-disabled-children {
-    //   color: $button-primary-disabled;
-    // }
-
-    // &-dashed-disabled-children {
-    //   color: $button-primary-disabled;
-    // }
-
-    // &-none-disabled-children {
-    //   color: $button-primary-disabled;
-    // }
-
-    // &-children {
-    //   // color: $button-primary-color;
-    // }
-  }
-
-  &-success {
-    color: $button-success-border-color;
-    background-origin: border-box;
-    border-width: $button-border-width;
-    border-style: solid;
-    border-color: $button-success-border-color;
-
-    &-solid {
-      color: $button-success-color;
-      background: $button-success-background-color;
-      border-color: transparent;
-    }
-
-    &-dashed {
-      border-style: dashed;
-    }
-
-    &-none {
-      border-color: transparent;
-    }
-
-    &-disabled {
-      background: transparent;
-      color: $button-success-disabled;
-      border-color: $button-success-disabled;
-    }
-
-    &-solid-disabled {
-      color: $button-success-color;
-      background: $button-success-disabled;
-    }
-
-    &-none-disabled {
-      border-color: transparent;
-    }
-  }
-
-  &-info {
-    color: $button-info-border-color;
-    background: transparent;
-    background-origin: border-box;
-    border-width: $button-border-width;
-    border-style: solid;
-    border-color: $button-info-border-color;
-
-    &-solid {
-      color: $button-info-color;
-      background: $button-info-background-color;
-      border-color: transparent;
-    }
-
-    &-dashed {
-      border-style: dashed;
-    }
-
-    &-none {
-      border-color: transparent;
-    }
-
-    &-disabled {
-      background: transparent;
-      color: $button-info-disabled;
-      border-color: $button-info-disabled;
-    }
-
-    &-solid-disabled {
-      color: $button-info-color;
-      background: $button-info-disabled;
-    }
-
-    &-none-disabled {
-      border-color: transparent;
-    }
-  }
-
-  &-danger {
-    color: $button-danger-border-color;
-    background-origin: border-box;
-    border-width: $button-border-width;
-    border-style: solid;
-    border-color: $button-danger-border-color;
-
-    &-solid {
-      color: $button-danger-color;
-      background: $button-danger-background-color;
-      border-color: transparent;
-    }
-
-    &-dashed {
-      border-style: dashed;
-    }
-
-    &-none {
-      border-color: transparent;
-    }
-
-    &-disabled {
-      background: transparent;
-      color: $button-danger-disabled;
-      border-color: $button-danger-disabled;
-    }
-
-    &-solid-disabled {
-      color: $button-danger-color;
-      background: $button-danger-disabled;
-    }
-
-    &-none-disabled {
-      border-color: transparent;
-    }
-  }
-
-  &-warning {
-    color: $button-warning-border-color;
-    background-origin: border-box;
-    border-width: $button-border-width;
-    border-style: solid;
-    border-color: $button-warning-border-color;
-
-    &-solid {
-      color: $button-warning-color;
-      background: $button-warning-background-color;
-      border-color: transparent;
-    }
-
-    &-dashed {
-      border-style: dashed;
-    }
-
-    &-none {
-      border-color: transparent;
-    }
-
-    &-disabled {
-      background: transparent;
-      color: $button-warning-disabled;
-      border-color: $button-warning-disabled;
-    }
-
-    &-solid-disabled {
-      color: $button-warning-color;
-      background: $button-warning-disabled;
-    }
-
-    &-none-disabled {
-      border-color: transparent;
-    }
-  }
-
-  &-block {
-    display: block;
-    width: 100%;
-  }
-
-  &-solid {
-    color: $button-primary-color;
-    background: $button-primary-background-color;
-    background-origin: border-box;
-    border: $button-border-width solid transparent;
-
-    &.nut-button-disabled {
-      color: $button-default-disabled-color;
-      background: $button-default-disabled;
-    }
-  }
-
-  &-outline,
-  &-dashed {
-    background: transparent;
-  }
-
-  &-none {
-    background: transparent;
-    border-color: transparent;
-    background: transparent;
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-    color: #ffffff;
-    background: $button-default-disabled;
-    border-color: $button-default-disabled;
-  }
-
-  &-loading {
-    cursor: default;
-    opacity: 0.9;
-  }
-
-  &-round {
-    border-radius: $button-border-radius;
-
-    &.nut-button-xlarge,
-    &.nut-button-large {
-      border-radius: $button-large-border-radius;
-    }
-
-    &.nut-button-small {
-      border-radius: $button-small-border-radius;
-    }
-
-    &.nut-button-mini {
-      border-radius: $button-mini-border-radius;
-    }
-  }
-
-  &-square {
-    border-radius: $button-square-border-radius;
-  }
-}
-
-[dir='rtl'] .nut-button,
-.nut-rtl .nut-button {
-  &-text {
-    margin-left: 0;
-    margin-right: $button-text-icon-margin;
-
-    &.right {
-      margin-left: $button-text-icon-margin;
-    }
-  }
-
-  &::before {
-    left: auto;
-    right: 50%;
-    transform: translate(50%, -50%);
-  }
-}

From 1e1c37f96fb8aeec97005bcc53d2a2e9b159a2ce Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Tue, 25 Jun 2024 11:11:22 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E5=B0=8F=E7=A8=8B=E5=BA=8F=E4=B8=8B?=
 =?UTF-8?q?=20disabled=20=E7=8A=B6=E6=80=81=20=E5=8D=95=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.json                        |  2 +-
 src/packages/button/button.harmony.css |  8 ++++----
 src/packages/button/button.scss        | 10 +++++-----
 src/packages/button/button.taro.tsx    |  3 ---
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/config.json b/src/config.json
index f2478c0ade..0ad450dcda 100644
--- a/src/config.json
+++ b/src/config.json
@@ -59,7 +59,7 @@
       "enName": "base",
       "packages": [
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Button",
           "type": "component",
           "cName": "按钮",
diff --git a/src/packages/button/button.harmony.css b/src/packages/button/button.harmony.css
index 8b87874322..a1044c6b7a 100644
--- a/src/packages/button/button.harmony.css
+++ b/src/packages/button/button.harmony.css
@@ -79,6 +79,10 @@
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
 }
+.nut-button-disabled {
+  cursor: not-allowed;
+  color: #ffffff;
+}
 .nut-button.nut-button-icononly {
   width: 32px;
   padding: 0;
@@ -377,10 +381,6 @@
   background: transparent;
   border-color: transparent;
 }
-.nut-button-disabled {
-  cursor: not-allowed;
-  color: #ffffff;
-}
 .nut-button-loading {
   cursor: default;
   opacity: 0.9;
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 98fcf81660..c541ad902a 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -89,6 +89,11 @@
     }
   }
 
+  &-disabled {
+    cursor: not-allowed;
+    color: #ffffff;
+  }
+
   &.nut-button-icononly {
     width: $button-default-height;
     padding: 0;
@@ -402,11 +407,6 @@
     border-color: transparent;
   }
 
-  &-disabled {
-    cursor: not-allowed;
-    color: #ffffff;
-  }
-
   &-loading {
     cursor: default;
     opacity: 0.9;
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index ccfc555ed8..be64ca5243 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -108,9 +108,6 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
       if (props.color) {
         if (props.fill === 'outline' || props.fill === 'dashed') {
           style.color = color
-          if (!color?.includes('gradient')) {
-            style.borderColor = color
-          }
         } else {
           style.color = '#fff'
           style.background = 'transparent'

From 9d4f7bfadcb3dd71ab4c6ef480fb0d3324f4d23e Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Wed, 26 Jun 2024 12:15:21 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E9=B8=BF=E8=92=99=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/button/demos/taro/demo10.tsx |  8 ++++----
 src/packages/button/demos/taro/demo2.tsx  |  8 ++++----
 src/packages/button/demos/taro/demo3.tsx  |  8 ++++----
 src/packages/button/demos/taro/demo4.tsx  |  8 ++++----
 src/packages/button/demos/taro/demo5.tsx  |  8 ++++----
 src/packages/button/demos/taro/demo6.tsx  |  8 ++++----
 src/packages/button/demos/taro/demo7.tsx  |  8 ++++----
 src/packages/button/demos/taro/demo8.tsx  | 16 ++++++++--------
 8 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/packages/button/demos/taro/demo10.tsx b/src/packages/button/demos/taro/demo10.tsx
index 2e143dcf93..b5dcef4d2c 100644
--- a/src/packages/button/demos/taro/demo10.tsx
+++ b/src/packages/button/demos/taro/demo10.tsx
@@ -7,10 +7,10 @@ const App = () => {
   const marginStyle = harmonyAndRn()
     ? {
         width: pxTransform(120),
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
+        marginRight: pxTransform(8),
+        marginTop: pxTransform(8),
+        marginLeft: pxTransform(8),
+        marginBottom: pxTransform(8),
       }
     : {
         marginRight: 8,
diff --git a/src/packages/button/demos/taro/demo2.tsx b/src/packages/button/demos/taro/demo2.tsx
index cfac1c6970..eb826b52f0 100644
--- a/src/packages/button/demos/taro/demo2.tsx
+++ b/src/packages/button/demos/taro/demo2.tsx
@@ -7,10 +7,10 @@ const Demo2 = () => {
   const marginStyle = harmony()
     ? {
         width: pxTransform(90),
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
+        marginRight: pxTransform(8),
+        marginTop: pxTransform(8),
+        marginLeft: pxTransform(8),
+        marginBottom: pxTransform(8),
       }
     : {
         marginRight: 8,
diff --git a/src/packages/button/demos/taro/demo3.tsx b/src/packages/button/demos/taro/demo3.tsx
index 3022ff1173..531558e633 100644
--- a/src/packages/button/demos/taro/demo3.tsx
+++ b/src/packages/button/demos/taro/demo3.tsx
@@ -5,10 +5,10 @@ import pxTransform from '@/utils/px-transform'
 const Demo3 = () => {
   const marginStyle = {
     width: pxTransform(80),
-    marginRight: 8,
-    marginTop: 8,
-    marginLeft: 8,
-    marginBottom: 8,
+    marginRight: pxTransform(8),
+    marginTop: pxTransform(8),
+    marginLeft: pxTransform(8),
+    marginBottom: pxTransform(8),
   }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
diff --git a/src/packages/button/demos/taro/demo4.tsx b/src/packages/button/demos/taro/demo4.tsx
index 941d564979..43c3ed73d3 100644
--- a/src/packages/button/demos/taro/demo4.tsx
+++ b/src/packages/button/demos/taro/demo4.tsx
@@ -6,10 +6,10 @@ import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   const marginStyle = {
-    marginRight: 8,
-    marginTop: 8,
-    marginLeft: 8,
-    marginBottom: 8,
+    marginRight: pxTransform(8),
+    marginTop: pxTransform(8),
+    marginLeft: pxTransform(8),
+    marginBottom: pxTransform(8),
   }
   return (
     <>
diff --git a/src/packages/button/demos/taro/demo5.tsx b/src/packages/button/demos/taro/demo5.tsx
index 156aec9595..2f3775630c 100644
--- a/src/packages/button/demos/taro/demo5.tsx
+++ b/src/packages/button/demos/taro/demo5.tsx
@@ -6,10 +6,10 @@ import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   const marginStyle = {
-    marginRight: 8,
-    marginTop: 8,
-    marginLeft: 8,
-    marginBottom: 8,
+    marginRight: pxTransform(8),
+    marginTop: pxTransform(8),
+    marginLeft: pxTransform(8),
+    marginBottom: pxTransform(8),
   }
   return (
     <>
diff --git a/src/packages/button/demos/taro/demo6.tsx b/src/packages/button/demos/taro/demo6.tsx
index 72b1740ac2..26b528738a 100644
--- a/src/packages/button/demos/taro/demo6.tsx
+++ b/src/packages/button/demos/taro/demo6.tsx
@@ -7,10 +7,10 @@ const Demo6 = () => {
   const marginStyle = harmonyAndRn()
     ? {
         width: pxTransform(rn() ? 120 : 150),
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
+        marginRight: pxTransform(8),
+        marginTop: pxTransform(8),
+        marginLeft: pxTransform(8),
+        marginBottom: pxTransform(8),
       }
     : {
         marginRight: 8,
diff --git a/src/packages/button/demos/taro/demo7.tsx b/src/packages/button/demos/taro/demo7.tsx
index 0674160fda..d8c347b735 100644
--- a/src/packages/button/demos/taro/demo7.tsx
+++ b/src/packages/button/demos/taro/demo7.tsx
@@ -7,10 +7,10 @@ const Demo7 = () => {
   const [loading, setLoading] = useState(false)
   const marginStyle = {
     width: pxTransform(rn() ? 90 : 120),
-    marginRight: 8,
-    marginTop: 8,
-    marginLeft: 8,
-    marginBottom: 8,
+    marginRight: pxTransform(8),
+    marginTop: pxTransform(8),
+    marginLeft: pxTransform(8),
+    marginBottom: pxTransform(8),
   }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
diff --git a/src/packages/button/demos/taro/demo8.tsx b/src/packages/button/demos/taro/demo8.tsx
index bb9fbeaf12..055d721053 100644
--- a/src/packages/button/demos/taro/demo8.tsx
+++ b/src/packages/button/demos/taro/demo8.tsx
@@ -7,10 +7,10 @@ const Demo8 = () => {
   const marginStyle = harmonyAndRn()
     ? {
         width: pxTransform(90),
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
+        marginRight: pxTransform(8),
+        marginTop: pxTransform(8),
+        marginLeft: pxTransform(8),
+        marginBottom: pxTransform(8),
       }
     : {
         marginRight: 8,
@@ -22,10 +22,10 @@ const Demo8 = () => {
   const marginStyleXL = harmonyAndRn()
     ? {
         width: pxTransform(140),
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
+        marginRight: pxTransform(8),
+        marginTop: pxTransform(8),
+        marginLeft: pxTransform(8),
+        marginBottom: pxTransform(8),
       }
     : {
         marginRight: 8,