From f42f41d599856f69489e6b94a184ee9a1ea42f28 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Fri, 19 Mar 2021 14:54:37 +0100
Subject: [PATCH 1/3] [docs] Use jsxImportSource instead of jsx directive

---
 .../guides/interoperability/EmotionCSS.js     |  5 ++--
 .../guides/interoperability/EmotionCSS.tsx    |  5 ++--
 .../interoperability/interoperability.md      | 28 +------------------
 3 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js
index 05781d6c8c8c2f..3d5787aae87739 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.js
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.js
@@ -1,5 +1,6 @@
-/** @jsx jsx */
-import { jsx, css } from '@emotion/react';
+/* eslint-disable react/react-in-jsx-scope -- Unaware of jsxImportSource */
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import Slider from '@material-ui/core/Slider';
 import Box from '@material-ui/core/Box';
 
diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
index 05781d6c8c8c2f..3d5787aae87739 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
@@ -1,5 +1,6 @@
-/** @jsx jsx */
-import { jsx, css } from '@emotion/react';
+/* eslint-disable react/react-in-jsx-scope -- Unaware of jsxImportSource */
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import Slider from '@material-ui/core/Slider';
 import Box from '@material-ui/core/Box';
 
diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index 29e4f13cc25340..a039302fb7a840 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -589,33 +589,7 @@ export default function CssModulesSliderDeep2() {
 
 Emotion's **css()** method works seamlessly with Material-UI.
 
-{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideToolbar": true}}
-
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-interoperability-idymy)
-
-```jsx
-/** @jsx jsx */
-import { jsx, css } from '@emotion/react';
-import Slider from '@material-ui/core/Slider';
-
-export default function EmotionCSS() {
-  return (
-    <div>
-      <Slider defaultValue={30} />
-      <Slider
-        defaultValue={30}
-        css={css`
-          color: #20b2aa;
-
-          :hover {
-            color: #2e8b57;
-          }
-        `}
-      />
-    </div>
-  );
-}
-```
+{{"demo": "pages/guides/interoperability/EmotionCSS.js"}}
 
 ### Theme
 

From 3318657db48f4f9144db89021b569670ca18f7b2 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 20 Mar 2021 11:42:29 +0100
Subject: [PATCH 2/3] jsxImportSource only works with automatic runtime

---
 docs/src/pages/guides/interoperability/EmotionCSS.js  | 5 ++---
 docs/src/pages/guides/interoperability/EmotionCSS.tsx | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js
index 3d5787aae87739..05781d6c8c8c2f 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.js
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.js
@@ -1,6 +1,5 @@
-/* eslint-disable react/react-in-jsx-scope -- Unaware of jsxImportSource */
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import Slider from '@material-ui/core/Slider';
 import Box from '@material-ui/core/Box';
 
diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
index 3d5787aae87739..05781d6c8c8c2f 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
@@ -1,6 +1,5 @@
-/* eslint-disable react/react-in-jsx-scope -- Unaware of jsxImportSource */
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import Slider from '@material-ui/core/Slider';
 import Box from '@material-ui/core/Box';
 

From d5495f51a7fc19f105daa05d17d0656d4ed0a1cf Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 20 Mar 2021 11:56:14 +0100
Subject: [PATCH 3/3] Use defaultCodeOpen where appropriate

---
 .../interoperability/StyledComponentsDeep.js  |  4 +--
 .../interoperability/StyledComponentsDeep.tsx |  4 +--
 .../interoperability/interoperability.md      | 31 ++-----------------
 3 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
index 13c47c0d42b445..38085943b73e32 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
+++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
@@ -3,7 +3,7 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Slider from '@material-ui/core/Slider';
 import Box from '@material-ui/core/Box';
 
-const SliderCustomized = styled(Slider)`
+const CustomizedSlider = styled(Slider)`
   color: #20b2aa;
 
   :hover {
@@ -19,7 +19,7 @@ export default function StyledComponentsDeep() {
   return (
     <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
-      <SliderCustomized defaultValue={30} />
+      <CustomizedSlider defaultValue={30} />
     </Box>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
index 13c47c0d42b445..38085943b73e32 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
+++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
@@ -3,7 +3,7 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Slider from '@material-ui/core/Slider';
 import Box from '@material-ui/core/Box';
 
-const SliderCustomized = styled(Slider)`
+const CustomizedSlider = styled(Slider)`
   color: #20b2aa;
 
   :hover {
@@ -19,7 +19,7 @@ export default function StyledComponentsDeep() {
   return (
     <Box sx={{ width: 300 }}>
       <Slider defaultValue={30} />
-      <SliderCustomized defaultValue={30} />
+      <CustomizedSlider defaultValue={30} />
     </Box>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index a039302fb7a840..c6eb724c3af34f 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -324,34 +324,7 @@ In Material-UI, all child elements have an increased specificity of 2: `.parent
 
 The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
 
-{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": false}}
-
-```jsx
-import * as React from 'react';
-import Slider from '@material-ui/core/Slider';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
-
-const CustomizedSlider = styled(Slider)`
-  color: #20b2aa;
-
-  :hover {
-    color: #2e8b57;
-  }
-
-  & .MuiSlider-thumb {
-    border-radius: 1px;
-  }
-`;
-
-export default function StyledComponentsDeep1() {
-  return (
-    <div>
-      <Slider defaultValue={30} />
-      <CustomizedSlider defaultValue={30} />
-    </div>
-  );
-}
-```
+{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}}
 
 The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core), but you can provide your own class name with the `componentsProps` API.
 
@@ -589,7 +562,7 @@ export default function CssModulesSliderDeep2() {
 
 Emotion's **css()** method works seamlessly with Material-UI.
 
-{{"demo": "pages/guides/interoperability/EmotionCSS.js"}}
+{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}}
 
 ### Theme