[docs] Use defaultCodeOpen where appropriate (mui#25418)

mfal · Mar 22, 2021 · d9f219a · d9f219a
1 parent f1fe74c
commit d9f219a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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