[docs] Improve Style Library Interoperability

mui · Jan 28, 2020 · 30d41f0 · 30d41f0
1 parent 5c84559
commit 30d41f0
Show file tree

Hide file tree

Showing 9 changed files with 382 additions and 223 deletions.
diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
@@ -93,6 +93,8 @@ const darkTheme = createMuiTheme({
 });
 
 export default function DarkTheme() {
+  // Note that if you intend to use two or more themes at the same time on your site,
+  // you need to wrap them with a single ThemeProvider at the root (not like in this example).
   return (
     <div style={{ width: '100%' }}>
       <ThemeProvider theme={darkTheme}>

diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
@@ -5,23 +5,19 @@ import Button from '@material-ui/core/Button';
 export default function EmotionCSS() {
   return (
     <div>
-      <Button>Material-UI</Button>
+      <Button>Default</Button>
       <Button
         css={css`
-          background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-          border-radius: 3px;
-          border: 0;
-          color: white;
-          height: 48px;
-          padding: 0 30px;
-          box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
-
-          & .MuiButton-label {
-            color: papayawhip;
+          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;
           }
         `}
       >
-        Emotion
+        Customized
       </Button>
     </div>
   );

diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js
@@ -4,22 +4,20 @@ import Button from '@material-ui/core/Button';
 import NoSsr from '@material-ui/core/NoSsr';
 
 const StyledButton = styled(Button)`
-  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-  border-radius: 3px;
-  border: 0;
-  color: white;
-  height: 48px;
-  padding: 0 30px;
-  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+  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;
+  }
 `;
 
 export default function StyledComponents() {
   return (
     <NoSsr>
-      <div>
-        <Button>Material-UI</Button>
-        <StyledButton>Styled Components</StyledButton>
-      </div>
+      <Button>Default</Button>
+      <StyledButton>Customized</StyledButton>
     </NoSsr>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx
@@ -4,22 +4,20 @@ import Button from '@material-ui/core/Button';
 import NoSsr from '@material-ui/core/NoSsr';
 
 const StyledButton = styled(Button)`
-  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-  border-radius: 3px;
-  border: 0;
-  color: white;
-  height: 48px;
-  padding: 0 30px;
-  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+  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;
+  }
 `;
 
 export default function StyledComponents() {
   return (
     <NoSsr>
-      <div>
-        <Button>Material-UI</Button>
-        <StyledButton>Styled Components</StyledButton>
-      </div>
+      <Button>Default</Button>
+      <StyledButton>Customized</StyledButton>
     </NoSsr>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
@@ -3,26 +3,23 @@ import styled from 'styled-components';
 import Button from '@material-ui/core/Button';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const StyledButton = styled(({ color, ...other }) => <Button {...other} />)`
-  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-  border: 0;
-  color: white;
-  height: 48px;
-  padding: 0 30px;
-  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
-
+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;
+  }
   & .MuiButton-label {
-    color: ${props => props.color};
+    color: #fff;
   }
 `;
 
 export default function StyledComponentsDeep() {
   return (
     <NoSsr>
-      <div>
-        <Button>Material-UI</Button>
-        <StyledButton color="papayawhip">Styled Components</StyledButton>
-      </div>
+      <Button>Default</Button>
+      <StyledButton>Customized</StyledButton>
     </NoSsr>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
@@ -3,26 +3,23 @@ import styled from 'styled-components';
 import Button from '@material-ui/core/Button';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const StyledButton = styled(({ color, ...other }) => <Button {...other} />)`
-  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-  border: 0;
-  color: white;
-  height: 48px;
-  padding: 0 30px;
-  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
-
+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;
+  }
   & .MuiButton-label {
-    color: ${props => props.color};
+    color: #fff;
   }
 `;
 
 export default function StyledComponentsDeep() {
   return (
     <NoSsr>
-      <div>
-        <Button>Material-UI</Button>
-        <StyledButton color="papayawhip">Styled Components</StyledButton>
-      </div>
+      <Button>Default</Button>
+      <StyledButton>Customized</StyledButton>
     </NoSsr>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
@@ -1,57 +1,46 @@
 import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import NoSsr from '@material-ui/core/NoSsr';
-import { createMuiTheme, darken, fade } from '@material-ui/core/styles';
+import {
+  createMuiTheme,
+  ThemeProvider as MuiThemeProvider,
+  darken,
+} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 
-const defaultTheme = createMuiTheme();
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#6772e5',
+    },
+  },
+});
 
-const StyledButton = styled.button`
+const StyledButton = styled(Button)`
   ${({ theme }) => `
-  padding: 8px 12px;
-  border: 1px solid;
-  cursor: pointer;
-  outline: 0;
-  border-radius: ${theme.shape.borderRadius}px;
-  color: ${theme.palette.primary.contrastText};
   background-color: ${theme.palette.primary.main};
-  border-color: ${theme.palette.primary.main};
-  transition: ${theme.transitions.create(['background-color', 'box-shadow'])};
-  font-family: ${[
-    '-apple-system',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    'Roboto',
-    '"Helvetica Neue"',
-    'Arial',
-    'sans-serif',
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-  ].join(',')};
+  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.1)};
-    border-color: ${darken(theme.palette.primary.main, 0.2)};
-  }
-  &:active {
     background-color: ${darken(theme.palette.primary.main, 0.2)};
-    border-color: ${darken(theme.palette.primary.main, 0.3)};
-  }
-  &:focus {
-    box-shadow: 0 0 0 0.2rem ${fade(theme.palette.primary.main, 0.5)};
   }
-  font-size: 18px;
   ${theme.breakpoints.up('md')} {
-    font-size: 16px;
+    font-size: 14px;
+    padding: 7px 14px;
   }
   `}
 `;
 
 export default function StyledComponentsTheme() {
   return (
     <NoSsr>
-      <ThemeProvider theme={defaultTheme}>
-        <StyledButton>Styled Components</StyledButton>
-      </ThemeProvider>
+      <MuiThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
+          <StyledButton>Styled Components</StyledButton>
+        </ThemeProvider>
+      </MuiThemeProvider>
     </NoSsr>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
@@ -1,57 +1,46 @@
 import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import NoSsr from '@material-ui/core/NoSsr';
-import { createMuiTheme, darken, fade } from '@material-ui/core/styles';
+import {
+  createMuiTheme,
+  ThemeProvider as MuiThemeProvider,
+  darken,
+} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 
-const defaultTheme = createMuiTheme();
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#6772e5',
+    },
+  },
+});
 
-const StyledButton = styled.button`
+const StyledButton = styled(Button)`
   ${({ theme }) => `
-  padding: 8px 12px;
-  border: 1px solid;
-  cursor: pointer;
-  outline: 0;
-  border-radius: ${theme.shape.borderRadius}px;
-  color: ${theme.palette.primary.contrastText};
   background-color: ${theme.palette.primary.main};
-  border-color: ${theme.palette.primary.main};
-  transition: ${theme.transitions.create(['background-color', 'box-shadow'])};
-  font-family: ${[
-    '-apple-system',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    'Roboto',
-    '"Helvetica Neue"',
-    'Arial',
-    'sans-serif',
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-  ].join(',')};
+  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.1)};
-    border-color: ${darken(theme.palette.primary.main, 0.2)};
-  }
-  &:active {
     background-color: ${darken(theme.palette.primary.main, 0.2)};
-    border-color: ${darken(theme.palette.primary.main, 0.3)};
-  }
-  &:focus {
-    box-shadow: 0 0 0 0.2rem ${fade(theme.palette.primary.main, 0.5)};
   }
-  font-size: 18px;
   ${theme.breakpoints.up('md')} {
-    font-size: 16px;
+    font-size: 14px;
+    padding: 7px 14px;
   }
   `}
 `;
 
 export default function StyledComponentsTheme() {
   return (
     <NoSsr>
-      <ThemeProvider theme={defaultTheme}>
-        <StyledButton>Styled Components</StyledButton>
-      </ThemeProvider>
+      <MuiThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
+          <StyledButton>Styled Components</StyledButton>
+        </ThemeProvider>
+      </MuiThemeProvider>
     </NoSsr>
   );
 }