From 14d574381e52248281706a284a9c8cbf31bfe2f7 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 20 Sep 2022 12:00:21 +0800
Subject: [PATCH 1/2] feat: replace inner with inner-checked and
 inner-unchecked

---
 src/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 41e81e6..3d5089c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -98,9 +98,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         onClick={onInternalClick}
       >
         {loadingIcon}
-        <span className={`${prefixCls}-inner`}>
-          {innerChecked ? checkedChildren : unCheckedChildren}
-        </span>
+        <span className={`${prefixCls}-inner-checked`}>{checkedChildren}</span>
+        <span className={`${prefixCls}-inner-unchecked`}>{unCheckedChildren}</span>
       </button>
     );
   },

From cb06756cb2a76dcdcb94390fd8bc3949b4a838fe Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 20 Sep 2022 14:16:07 +0800
Subject: [PATCH 2/2] feat: support inner checked and unchecked

---
 assets/index.less | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 9ac242b..6c8ecd7 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -16,13 +16,23 @@
   background-color: #ccc;
   cursor: pointer;
   transition: all @duration cubic-bezier(0.35, 0, 0.25, 1);
+  overflow: hidden;
 
-  &-inner {
+  &-inner-checked,
+  &-inner-unchecked {
     color:#fff;
     font-size: 12px;
     position: absolute;
-    left: 24px;
     top: 0;
+    transition: left @duration cubic-bezier(0.35, 0, 0.25, 1);
+  }
+
+  &-inner-checked {
+    left: 6px - 20px;
+  }
+
+  &-inner-unchecked {
+    left: 24px;
   }
 
   &:after{
@@ -57,10 +67,14 @@
     border: 1px solid #87d068;
     background-color: #87d068;
 
-    .@{switchPrefixCls}-inner {
+    .@{switchPrefixCls}-inner-checked {
       left: 6px;
     }
 
+    .@{switchPrefixCls}-inner-unchecked {
+      left: 44px;
+    }
+
     &:after{
       left: 22px;
     }