fix: SearchBar 组件样式修改，排版错误问题处理 (#632)

src/packages/searchbar/demo.taro.tsx

@@ -97,6 +97,7 @@ const SearchBarDemo = () => {
         <SearchBar
           leftoutIcon={<Icon name="heart-fill1" size="14" />}
           rightoutIcon={<Icon name="star-fill" size="14" />}
+          rightinIcon={<Icon name="star-fill" size="14" />}
         />
         <h2>{translated.title6}</h2>
         <SearchBar

src/packages/searchbar/searchbar.scss

@@ -48,15 +48,13 @@
     align-items: center;
     justify-content: center;
     height: $searchbar-input-height;
+    background: $searchbar-input-background;
   }
   &__icon {
-    position: absolute !important;
-  }
-  &__leftin-icon {
-    left: 10px;
+    padding: 0 5px 0 10px;
   }
   &__rightin-icon {
-    right: 5px;
+    padding: 0 5px;
   }
   .nut-searchbar__input-box {
     display: flex;
@@ -69,12 +67,13 @@
     box-sizing: border-box;
     width: $searchbar-input-width;
     height: $searchbar-input-height;
+    line-height: $searchbar-input-height;
     width: 100%;
     padding: $searchbar-input-padding;
     border-radius: 0;
     font-size: $font-size-small;
-    background: $searchbar-input-background;
     color: $searchbar-input-text-color;
+    background: transparent;
   }
   &__round {
     border-radius: $searchbar-input-border-radius;
@@ -83,9 +82,7 @@
     cursor: not-allowed;
   }
   &__clear {
-    position: absolute !important;
-    z-index: 888;
-    right: 8px;
+    padding: 0 10px 0 5px;
     i {
       color: $gray1 !important;
     }
@@ -118,14 +115,3 @@
     margin-left: 10px;
   }
 }
-.nut-searchbar-taro {
-  .nut-searchbar__leftin-icon {
-    //top: 41%;
-  }
-  .nut-searchbar__rightin-icon {
-    top: 41%;
-  }
-  .nut-searchbar__clear {
-    top: 33%;
-  }
-}

src/packages/searchbar/searchbar.taro.tsx

@@ -164,7 +164,7 @@ export const SearchBar: FunctionComponent<
           shape === 'round' ? searchbarBem('round') : ''
         } ${clearable ? searchbarBem('input-clear') : ''}`}
         ref={searchRef}
-        style={{ ...props.style, background: props.inputBackground }}
+        style={{ ...props.style }}
         value={value || ''}
         placeholder={placeholder || locale.placeholder}
         disabled={disabled}
@@ -315,7 +315,10 @@ export const SearchBar: FunctionComponent<
     >
       {renderLeftoutIcon()}
       {renderLabel()}
-      <div className={`${searchbarBem('content')}`}>
+      <div
+        className={`${searchbarBem('content')}`}
+        style={{ background: props.inputBackground }}
+      >
         {renderLeftinIcon()}
         <div className="nut-searchbar__input-box">{renderField()}</div>
         {renderRightinIcon()}

src/packages/searchbar/searchbar.tsx

@@ -163,7 +163,7 @@ export const SearchBar: FunctionComponent<
           shape === 'round' ? searchbarBem('round') : ''
         } ${clearable ? searchbarBem('input-clear') : ''}`}
         ref={searchRef}
-        style={{ ...props.style, background: props.inputBackground }}
+        style={{ ...props.style }}
         value={value || ''}
         placeholder={placeholder || locale.placeholder}
         disabled={disabled}
@@ -310,7 +310,10 @@ export const SearchBar: FunctionComponent<
     >
       {renderLeftoutIcon()}
       {renderLabel()}
-      <div className={`${searchbarBem('content')}`}>
+      <div
+        className={`${searchbarBem('content')}`}
+        style={{ background: props.inputBackground }}
+      >
         {renderLeftinIcon()}
         {renderField()}
         {renderRightinIcon()}

src/styles/variables.scss

@@ -1665,7 +1665,7 @@ $searchbar-action-text-color: var(
   $gray1
 ) !default;
 $searchbar-input-height: var(--nutui-searchbar-input-height, 32px) !default;
-$searchbar-input-padding: var(--nutui-searchbar-input-padding, 0 28px) !default;
+$searchbar-input-padding: var(--nutui-searchbar-input-padding, 0 5px) !default;
 $searchbar-input-background: var(
   --nutui-searchbar-input-background,
   #f7f7f7