[docs] Improve iOS style switch demo

[aayushjainx]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When the iOS styled switch is set to disable and the switch is turned on, it still displays the green colour and does not look like it is disabled. But works fine when the switch is set to false.

Expected Behavior 🤔

It is expected to turn its colour to grey when it is disabled and the state is set to true like the rest of the switches and should look like a disabled switch.

Steps to Reproduce 🕹

Steps:

1. Open the codesandbox
2. Go to line number 141 and in the iOS switch add another attribute i.e. disabled.
3. Save it and you could see that the iOS switch is still green coloured rather than turning into grey on disabled.

Context 🔦

iOS switch is used in many projects and is also used in disabled mode and do not provide a user-friendly experience when it still looks like enabled when it is disabled.

Your Environment 🌎

`npx @material-ui/envinfo`

 It was used in Google Chrome and Microsoft Edge.
  Output from `npx @material-ui/envinfo` goes here.

[mnajdova]

The styles you are adding on line 45 have higher specificity, that is why they are winning. I'd suggest adding the ':not(.Mui-disabled)' selector there too, maybe something like https://codesandbox.io/s/material-demo-forked-khxl6?file=/demo.tsx

[aayushjainx]

That's great but this was actually from the Material UI documentation. The bug is there.

[oliviertassinari]

@aayushjain7 This demo is only meant for illustration purposes, it doesn't cover all the state subtleties.

[oliviertassinari]

However, there is a bug in the nominal use case:

I would propose this diff to match the iOS spec:

diff --git a/docs/src/pages/components/switches/CustomizedSwitches.tsx b/docs/src/pages/components/switches/CustomizedSwitches.tsx
index 9dd13b3265..e7becca025 100644
--- a/docs/src/pages/components/switches/CustomizedSwitches.tsx
+++ b/docs/src/pages/components/switches/CustomizedSwitches.tsx
@@ -14,31 +14,34 @@ const IOSSwitch = styled((props: SwitchProps) => (
   padding: 0,
   margin: theme.spacing(1),
   '& .MuiSwitch-switchBase': {
-    padding: 1,
+    padding: 0,
+    margin: 2,
+    transitionDuration: '300ms',
     '&.Mui-checked': {
       transform: 'translateX(16px)',
       color: theme.palette.common.white,
       '& + .MuiSwitch-track': {
-        backgroundColor: '#52d869',
+        backgroundColor: '#33cf4d',
         opacity: 1,
         border: 0,
       },
     },
     '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: '#52d869',
+      color: '#33cf4d',
       border: '6px solid #fff',
     },
   },
   '& .MuiSwitch-thumb': {
-    width: 24,
-    height: 24,
+    width: 22,
+    height: 22,
   },
   '& .MuiSwitch-track': {
     borderRadius: 26 / 2,
-    border: `1px solid ${theme.palette.grey[400]}`,
-    backgroundColor: theme.palette.grey[50],
+    backgroundColor: '#e4e3e6',
     opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border-color']),
+    transition: theme.transitions.create(['background-color'], {
+      duration: 300,
+    }),
   },
 }));

[aayushjainx]

Great! 💯