From d9f219a2ac5941177b4fd00c0d8679e26496a6e6 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 22 Mar 2021 10:01:06 +0100
Subject: [PATCH] [docs] Use defaultCodeOpen where appropriate (#25418)

---
 .../interoperability/StyledComponentsDeep.js  |  4 +-
 .../interoperability/StyledComponentsDeep.tsx |  4 +-
 .../interoperability/interoperability.md      | 57 +------------------
 3 files changed, 6 insertions(+), 59 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 29e4f13cc25340..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,33 +562,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", "defaultCodeOpen": true}}
 
 ### Theme