fix: styles.affixWrapper didn't work (#44)

react-component · Aug 1, 2023 · 3a2968e · 3a2968e
1 parent 87d6291
commit 3a2968e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
@@ -116,7 +116,10 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     element = (
       <AffixWrapperComponent
         className={affixWrapperCls}
-        style={!hasAddon(props) ? style : undefined}
+        style={{
+          ...(!hasAddon(props) ? style : undefined),
+          ...styles?.affixWrapper,
+        }}
         hidden={!hasAddon(props) && hidden}
         onClick={onInputClick}
         {...dataAttrs?.affixWrapper}

diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
@@ -208,4 +208,33 @@ describe('BaseInput', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('styles should work', () => {
+    const container = render(
+      <BaseInput
+        prefixCls="rc-input"
+        prefix="prefix"
+        addonBefore="addon"
+        inputElement={<input />}
+        styles={{
+          affixWrapper: {
+            color: 'red',
+          },
+          prefix: {
+            color: 'blue',
+          },
+        }}
+      />,
+    );
+
+    expect(
+      container.container.querySelector<HTMLSpanElement>(
+        '.rc-input-affix-wrapper',
+      )?.style.color,
+    ).toBe('red');
+    expect(
+      container.container.querySelector<HTMLSpanElement>('.rc-input-prefix')
+        ?.style.color,
+    ).toBe('blue');
+  });
 });