refactor/style (#39)

* refactor: better style logic

* refactor: better style logic

Author: MadCcc

src/BaseInput.tsx

@@ -76,6 +76,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       ) || null,
     style: {
       ...inputElement.props?.style,
+      ...(!hasPrefixSuffix(props) && !hasAddon(props) ? style : {}),
     },
   });
 
@@ -108,7 +109,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     element = (
       <span
         className={affixWrapperCls}
-        style={style}
+        style={!hasAddon(props) ? style : undefined}
         hidden={!hasAddon(props) && hidden}
         onClick={onInputClick}
         {...dataAttrs?.affixWrapper}

tests/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,8 @@
 exports[`Input allowClear classNames and styles should work 1`] = `
 <div>
   <span
-    class="rc-input-affix-wrapper"
+    class="rc-input-affix-wrapper custom-class"
+    style="background-color: red;"
   >
     <span
       class="rc-input-prefix custom-prefix"
@@ -30,6 +31,74 @@ exports[`Input allowClear classNames and styles should work 1`] = `
       suffix
     </span>
   </span>
+  <span
+    class="rc-input-group-wrapper custom-class"
+    style="background-color: red;"
+  >
+    <span
+      class="rc-input-wrapper rc-input-group"
+    >
+      <span
+        class="rc-input-affix-wrapper"
+      >
+        <span
+          class="rc-input-prefix custom-prefix"
+          style="color: blue;"
+        >
+          prefix
+        </span>
+        <input
+          class="rc-input custom-input"
+          style="color: red;"
+          type="text"
+          value="123"
+        />
+        <span
+          class="rc-input-suffix custom-suffix"
+          style="color: yellow;"
+        >
+          <span
+            class="rc-input-show-count-suffix rc-input-show-count-has-suffix custom-count"
+            style="color: green;"
+          >
+            3
+          </span>
+          suffix
+        </span>
+      </span>
+      <span
+        class="rc-input-group-addon"
+      >
+        addon
+      </span>
+    </span>
+  </span>
+  <input
+    class="rc-input custom-input custom-class"
+    style="color: red; background-color: red;"
+    type="text"
+    value="123"
+  />
+  <span
+    class="rc-input-group-wrapper custom-class"
+    style="background-color: red;"
+  >
+    <span
+      class="rc-input-wrapper rc-input-group"
+    >
+      <input
+        class="rc-input custom-input"
+        style="color: red;"
+        type="text"
+        value="123"
+      />
+      <span
+        class="rc-input-group-addon"
+      >
+        addon
+      </span>
+    </span>
+  </span>
 </div>
 `;
 

tests/index.test.tsx

@@ -242,25 +242,76 @@ describe('Input allowClear', () => {
 
   it('classNames and styles should work', () => {
     const { container } = render(
-      <Input
-        value="123"
-        showCount
-        prefixCls="rc-input"
-        prefix="prefix"
-        suffix="suffix"
-        classNames={{
-          input: 'custom-input',
-          prefix: 'custom-prefix',
-          suffix: 'custom-suffix',
-          count: 'custom-count',
-        }}
-        styles={{
-          input: { color: 'red' },
-          prefix: { color: 'blue' },
-          suffix: { color: 'yellow' },
-          count: { color: 'green' },
-        }}
-      />,
+      <>
+        <Input
+          value="123"
+          showCount
+          prefixCls="rc-input"
+          prefix="prefix"
+          suffix="suffix"
+          className="custom-class"
+          style={{ backgroundColor: 'red' }}
+          classNames={{
+            input: 'custom-input',
+            prefix: 'custom-prefix',
+            suffix: 'custom-suffix',
+            count: 'custom-count',
+          }}
+          styles={{
+            input: { color: 'red' },
+            prefix: { color: 'blue' },
+            suffix: { color: 'yellow' },
+            count: { color: 'green' },
+          }}
+        />
+        <Input
+          value="123"
+          addonAfter="addon"
+          showCount
+          prefixCls="rc-input"
+          prefix="prefix"
+          suffix="suffix"
+          className="custom-class"
+          style={{ backgroundColor: 'red' }}
+          classNames={{
+            input: 'custom-input',
+            prefix: 'custom-prefix',
+            suffix: 'custom-suffix',
+            count: 'custom-count',
+          }}
+          styles={{
+            input: { color: 'red' },
+            prefix: { color: 'blue' },
+            suffix: { color: 'yellow' },
+            count: { color: 'green' },
+          }}
+        />
+        <Input
+          value="123"
+          prefixCls="rc-input"
+          className="custom-class"
+          style={{ backgroundColor: 'red' }}
+          classNames={{
+            input: 'custom-input',
+          }}
+          styles={{
+            input: { color: 'red' },
+          }}
+        />
+        <Input
+          value="123"
+          prefixCls="rc-input"
+          className="custom-class"
+          addonAfter="addon"
+          style={{ backgroundColor: 'red' }}
+          classNames={{
+            input: 'custom-input',
+          }}
+          styles={{
+            input: { color: 'red' },
+          }}
+        />
+      </>,
     );
     expect(container).toMatchSnapshot();
   });