fix

Author: LIUSHANYIN

src/components/Stepper/index.scss

@@ -13,9 +13,6 @@
   }
 }
 
-
-
-
 $baseClass: 'vant-stepper';
 .step-container {
   display: flex;
@@ -24,7 +21,7 @@ $baseClass: 'vant-stepper';
   input {
     margin: 0px 2px;
     border-radius: 5px;
-    font-size: 20px;
+    font-size: 10px;
     border: none;
     display: flex;
     justify-content: center;
@@ -34,25 +31,31 @@ $baseClass: 'vant-stepper';
   }
   button {
     border-radius: 5px;
-    font-size: 25px;
+    font-size: 20px;
     outline: none;
     background-color: rgba(128, 128, 128, 0.137);
     border: none;
     font-weight: 100;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0px;
+    margin: 0;
   }
-  .load-background{
+  .load-background {
     display: inline-block;
     border: 4px solid rgba(0, 0, 0, 0.1);
     border-left-color: white;
     border-radius: 50%;
-    width: 35px;
-    height: 35px;
+    width: 25px;
+    height: 25px;
     animation: donut-spin 1.2s linear infinite;
     position: relative;
-    
+
     opacity: 0;
   }
-  .load{
+  .load {
     width: 85px;
     height: 85px;
     position: absolute;
@@ -65,13 +68,16 @@ $baseClass: 'vant-stepper';
     margin: auto;
     opacity: 0;
   }
-
 }
 
 button.#{$baseClass} {
-  width: 50px;
-  height: 50px;
- 
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
 
   &__disabled {
     cursor: not-allowed;
@@ -83,21 +89,26 @@ button.#{$baseClass} {
   }
 }
 input.#{$baseClass} {
-  width: 55px;
-  height: 50px;
+  width: 30px;
+  height: 25px;
 
-  &__disabled {
+  &__disableInput {
     cursor: not-allowed;
     opacity: $button-disabled-opacity;
   }
   &__theme {
     border-radius: 50%;
+    
   }
-  
-
 }
-
-
-
-
-
+.step-container button p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: inherit;
+  width: inherit;
+  padding: 0;
+  font-size: 20px;
+  margin: 0;
+}

src/components/Stepper/index.tsx

@@ -48,7 +48,7 @@ export default function Stepper({
     style: {}
   };
   const inputProps = {
-    className: classnames(baseClass, [{}]),
+    className: classnames(baseClass, [{ disableInput }]),
     style: {}
   };
 
@@ -119,20 +119,24 @@ export default function Stepper({
     }
   };
   useEffect(() => {
-    if (value === 0 || value === min) {
-      setIsMinus(true);
-    } else if (value === max) {
+    if (disabled) {
       setIsPlus(true);
+      setIsMinus(true);
     } else {
-      setIsMinus(false);
-      setIsPlus(false);
+      if (value === 0 || value === min) {
+        setIsMinus(true);
+      } else if (value === max) {
+        setIsPlus(true);
+      } else {
+        setIsMinus(false);
+        setIsPlus(false);
+      }
     }
-  }, [value, max, min]);
+  }, [disabled, value, max, min, handleDecrementProps, handleIncrementBtProps]);
 
   if (disabled) {
     Object.assign(handleDecrementProps, { disabled });
     Object.assign(handleIncrementBtProps, { disabled });
-    Object.assign(inputProps, { disabled });
   }
   if (theme) {
     Object.assign(handleIncrementBtProps, {
@@ -187,18 +191,9 @@ export default function Stepper({
   useEffect(() => {
     if (disableInput) {
       setIsInput(true);
+      Object.assign(inputProps, { disabled });
     }
   }, [disableInput]);
-  useEffect(() => {
-    if (disabled) {
-      setIsMinus(true);
-    }
-  }, [disabled]);
-  useEffect(() => {
-    if (disabled) {
-      setIsPlus(true);
-    }
-  }, [disabled]);
 
   return (
     <div className='step-container'>
@@ -207,7 +202,7 @@ export default function Stepper({
         {...handleDecrementProps}
         disabled={isMinus}
       >
-        -
+        <p>-</p>
       </button>
       <input
         value={value}
@@ -221,7 +216,7 @@ export default function Stepper({
         {...handleIncrementBtProps}
         disabled={isPlus}
       >
-        +
+        <p>+</p>
       </button>
       {loading && (
         <div id='loading-background' className='load'>