From 342d35554451210b4b712f21ddd728c1b13568dc Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Sat, 15 Feb 2025 14:31:34 +0800
Subject: [PATCH] feat: Switch support classnames and styles

---
 src/index.tsx       | 18 ++++++++++++++++--
 tests/index.spec.js |  9 +++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 381a234..887c25d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -25,6 +25,8 @@ interface SwitchProps
   loadingIcon?: React.ReactNode;
   style?: React.CSSProperties;
   title?: string;
+  styles?: { content: React.CSSProperties };
+  classNames?: { content: string };
 }
 
 const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
@@ -41,6 +43,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
       onClick,
       onChange,
       onKeyDown,
+      styles,
+      classNames: switchClassNames,
       ...restProps
     },
     ref,
@@ -99,8 +103,18 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
       >
         {loadingIcon}
         <span className={`${prefixCls}-inner`}>
-          <span className={`${prefixCls}-inner-checked`}>{checkedChildren}</span>
-          <span className={`${prefixCls}-inner-unchecked`}>{unCheckedChildren}</span>
+          <span
+            className={classNames(`${prefixCls}-inner-checked`, switchClassNames?.content)}
+            style={styles?.content}
+          >
+            {checkedChildren}
+          </span>
+          <span
+            className={classNames(`${prefixCls}-inner-unchecked`, switchClassNames?.content)}
+            style={styles?.content}
+          >
+            {unCheckedChildren}
+          </span>
         </span>
       </button>
     );
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 02ec46a..eef4e03 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -129,4 +129,13 @@ describe('rc-switch', () => {
     wrapper.simulate('click');
     expect(onChange).not.toHaveBeenCalled();
   });
+  it('support classnames and styles', () => {
+    const wrapper = createSwitch({
+      classNames: { content: 'custom-content' },
+      styles: { content: { background: 'red' } },
+    });
+    const contentElement = wrapper.find('.custom-content').at(0);
+    expect(contentElement.exists()).toBe(true);
+    expect(contentElement.prop('style')).toEqual({ background: 'red' });
+  });
 });