[docs] Interoperability guide updates

docs/src/pages/guides/interoperability/EmotionCSS.js

@@ -1,25 +1,21 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import Button from '@material-ui/core/Button';
+import Slider from '@material-ui/lab/SliderStyled';
+import Box from '@material-ui/core/Box';
 
 export default function EmotionCSS() {
   return (
-    <div>
-      <Button>Default</Button>
-      <Button
+    <Box width={300}>
+      <Slider defaultValue={30} />
+      <Slider
+        defaultValue={30}
         css={css`
-          background-color: #6772e5;
-          color: #fff;
-          box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
-            0 1px 3px rgba(0, 0, 0, 0.08);
-          padding: 7px 14px;
-          &:hover {
-            background-color: #5469d4;
+          color: #20b2aa;
+          :hover {
+            color: #2e8b57;
           }
         `}
-      >
-        Customized
-      </Button>
-    </div>
+      />
+    </Box>
   );
 }

docs/src/pages/guides/interoperability/EmotionCSS.tsx

@@ -1,25 +1,21 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import Button from '@material-ui/core/Button';
+import Slider from '@material-ui/lab/SliderStyled';
+import Box from '@material-ui/core/Box';
 
 export default function EmotionCSS() {
   return (
-    <div>
-      <Button>Default</Button>
-      <Button
+    <Box width={300}>
+      <Slider defaultValue={30} />
+      <Slider
+        defaultValue={30}
         css={css`
-          background-color: #6772e5;
-          color: #fff;
-          box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
-            0 1px 3px rgba(0, 0, 0, 0.08);
-          padding: 7px 14px;
-          &:hover {
-            background-color: #5469d4;
+          color: #20b2aa;
+          :hover {
+            color: #2e8b57;
           }
         `}
-      >
-        Customized
-      </Button>
-    </div>
+      />
+    </Box>
   );
 }

docs/src/pages/guides/interoperability/EmotionTheme.js

@@ -1,46 +1,35 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import Button from '@material-ui/core/Button';
-import { ThemeProvider } from 'emotion-theming';
+import Slider from '@material-ui/lab/SliderStyled';
 import {
   createMuiTheme,
-  ThemeProvider as MuiThemeProvider,
+  ThemeProvider,
   darken,
 } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 
 const customTheme = createMuiTheme({
   palette: {
     primary: {
-      main: '#6772e5',
+      main: '#20b2aa',
     },
   },
 });
 
 export default function EmotionTheme() {
   return (
-    <MuiThemeProvider theme={customTheme}>
+    <Box width={300}>
       <ThemeProvider theme={customTheme}>
-        <Button>Default</Button>
-        <Button
+        <Slider
+          defaultValue={30}
           css={(theme) => css`
-            background-color: ${theme.palette.primary.main};
-            color: #fff;
-            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
-              0 1px 3px rgba(0, 0, 0, 0.08);
-            padding: 4px 10px;
-            font-size: 13px;
-            &:hover {
-              background-color: ${darken(theme.palette.primary.main, 0.2)};
-            }
-            ${theme.breakpoints.up('sm')} {
-              font-size: 14px;
-              padding: 7px 14px;
+            color: ${theme.palette.primary.main};
+            :hover {
+              color: ${darken(theme.palette.primary.main, 0.2)};
             }
           `}
-        >
-          Customized
-        </Button>
+        />
       </ThemeProvider>
-    </MuiThemeProvider>
+    </Box>
   );
 }

docs/src/pages/guides/interoperability/EmotionTheme.tsx

@@ -1,46 +1,35 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import Button from '@material-ui/core/Button';
-import { ThemeProvider } from 'emotion-theming';
+import Slider from '@material-ui/lab/SliderStyled';
 import {
   createMuiTheme,
-  ThemeProvider as MuiThemeProvider,
+  ThemeProvider,
   darken,
 } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 
 const customTheme = createMuiTheme({
   palette: {
     primary: {
-      main: '#6772e5',
+      main: '#20b2aa',
     },
   },
 });
 
 export default function EmotionTheme() {
   return (
-    <MuiThemeProvider theme={customTheme}>
+    <Box width={300}>
       <ThemeProvider theme={customTheme}>
-        <Button>Default</Button>
-        <Button
+        <Slider
+          defaultValue={30}
           css={(theme) => css`
-            background-color: ${theme.palette.primary.main};
-            color: #fff;
-            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
-              0 1px 3px rgba(0, 0, 0, 0.08);
-            padding: 4px 10px;
-            font-size: 13px;
-            &:hover {
-              background-color: ${darken(theme.palette.primary.main, 0.2)};
-            }
-            ${theme.breakpoints.up('sm')} {
-              font-size: 14px;
-              padding: 7px 14px;
+            color: ${theme.palette.primary.main};
+            :hover {
+              color: ${darken(theme.palette.primary.main, 0.2)};
             }
           `}
-        >
-          Customized
-        </Button>
+        />
       </ThemeProvider>
-    </MuiThemeProvider>
+    </Box>
   );
 }

docs/src/pages/guides/interoperability/StyledComponents.js

@@ -1,23 +1,20 @@
 import * as React from 'react';
-import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
-import NoSsr from '@material-ui/core/NoSsr';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Slider from '@material-ui/lab/SliderStyled';
+import Box from '@material-ui/core/Box';
 
-const StyledButton = styled(Button)`
-  background-color: #6772e5;
-  color: #fff;
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-  padding: 7px 14px;
-  &:hover {
-    background-color: #5469d4;
+const SliderCustomized = styled(Slider)`
+  color: #20b2aa;
+  :hover {
+    color: #2e8b57;
   }
 `;
 
 export default function StyledComponents() {
   return (
-    <NoSsr>
-      <Button>Default</Button>
-      <StyledButton>Customized</StyledButton>
-    </NoSsr>
+    <Box width={300}>
+      <Slider defaultValue={30} />
+      <SliderCustomized defaultValue={30} />
+    </Box>
   );
 }

docs/src/pages/guides/interoperability/StyledComponents.tsx

@@ -1,23 +1,20 @@
 import * as React from 'react';
-import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
-import NoSsr from '@material-ui/core/NoSsr';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Slider from '@material-ui/lab/SliderStyled';
+import Box from '@material-ui/core/Box';
 
-const StyledButton = styled(Button)`
-  background-color: #6772e5;
-  color: #fff;
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-  padding: 7px 14px;
-  &:hover {
-    background-color: #5469d4;
+const SliderCustomized = styled(Slider)`
+  color: #20b2aa;
+  :hover {
+    color: #2e8b57;
   }
 `;
 
 export default function StyledComponents() {
   return (
-    <NoSsr>
-      <Button>Default</Button>
-      <StyledButton>Customized</StyledButton>
-    </NoSsr>
+    <Box width={300}>
+      <Slider defaultValue={30} />
+      <SliderCustomized defaultValue={30} />
+    </Box>
   );
 }

docs/src/pages/guides/interoperability/StyledComponentsDeep.js

@@ -1,25 +1,23 @@
 import * as React from 'react';
-import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
-import NoSsr from '@material-ui/core/NoSsr';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Slider from '@material-ui/lab/SliderStyled';
+import Box from '@material-ui/core/Box';
 
-const StyledButton = styled(Button)`
-  background-color: #6772e5;
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-  padding: 7px 14px;
-  &:hover {
-    background-color: #5469d4;
+const SliderCustomized = styled(Slider)`
+  color: #20b2aa;
+  :hover {
+    color: #2e8b57;
   }
-  & .MuiButton-label {
-    color: #fff;
+  & .MuiSlider-thumb {
+    border-radius: 1px;
   }
 `;
 
-export default function StyledComponentsDeep() {
+export default function StyledComponents() {
   return (
-    <NoSsr>
-      <Button>Default</Button>
-      <StyledButton>Customized</StyledButton>
-    </NoSsr>
+    <Box width={300}>
+      <Slider defaultValue={30} />
+      <SliderCustomized defaultValue={30} />
+    </Box>
   );
 }

docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx

@@ -1,25 +1,23 @@
 import * as React from 'react';
-import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
-import NoSsr from '@material-ui/core/NoSsr';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Slider from '@material-ui/lab/SliderStyled';
+import Box from '@material-ui/core/Box';
 
-const StyledButton = styled(Button)`
-  background-color: #6772e5;
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-  padding: 7px 14px;
-  &:hover {
-    background-color: #5469d4;
+const SliderCustomized = styled(Slider)`
+  color: #20b2aa;
+  :hover {
+    color: #2e8b57;
   }
-  & .MuiButton-label {
-    color: #fff;
+  & .MuiSlider-thumb {
+    border-radius: 1px;
   }
 `;
 
-export default function StyledComponentsDeep() {
+export default function StyledComponents() {
   return (
-    <NoSsr>
-      <Button>Default</Button>
-      <StyledButton>Customized</StyledButton>
-    </NoSsr>
+    <Box width={300}>
+      <Slider defaultValue={30} />
+      <SliderCustomized defaultValue={30} />
+    </Box>
   );
 }