Use less components in UnstyledSwitchesMaterial

mui · Jul 7, 2021 · 530e91e · 530e91e
1 parent 2fe768d
commit 530e91e
Showing 1 changed file with 22 additions and 21 deletions.
diff --git a/docs/src/pages/components/switches/UnstyledSwitchesMaterial.js b/docs/src/pages/components/switches/UnstyledSwitchesMaterial.js
@@ -218,18 +218,6 @@ const SwitchRoot = styled('span', {
   }),
 }));
 
-const DefaultSwitchThumb = styled('span', {
-  name: 'MuiSwitch',
-  slot: 'Thumb',
-  overridesResolver: (props, styles) => styles.thumb,
-})(({ theme }) => ({
-  boxShadow: theme.shadows[1],
-  backgroundColor: 'currentColor',
-  width: 20,
-  height: 20,
-  borderRadius: '50%',
-}));
-
 const SwitchInput = styled('input', {
   name: 'MuiSwitch',
   slot: 'Input',
@@ -247,17 +235,30 @@ const SwitchInput = styled('input', {
   zIndex: 1,
 });
 
-const SwitchThumb = ({ isChecked, icon, checkedIcon, className }) => {
-  if (!isChecked && icon) {
-    return icon;
-  }
+const SwitchThumb = styled(
+  ({ isChecked, icon, checkedIcon, className }) => {
+    if (!isChecked && icon) {
+      return icon;
+    }
 
-  if (isChecked && checkedIcon) {
-    return checkedIcon;
-  }
+    if (isChecked && checkedIcon) {
+      return checkedIcon;
+    }
 
-  return <DefaultSwitchThumb className={className} />;
-};
+    return <span className={className} />;
+  },
+  {
+    name: 'MuiSwitch',
+    slot: 'Thumb',
+    overridesResolver: (props, styles) => styles.thumb,
+  },
+)(({ theme }) => ({
+  boxShadow: theme.shadows[1],
+  backgroundColor: 'currentColor',
+  width: 20,
+  height: 20,
+  borderRadius: '50%',
+}));
 
 const SwitchLayout = React.forwardRef((props, ref) => {
   const {