diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 8d0bf985195548..378264521113f9 100644
--- 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.js b/docs/src/pages/guides/interoperability/EmotionCSS.js
index ee4cb9dae966db..4b09485b7163b3 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.js
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.js
@@ -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/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
index ee4cb9dae966db..4b09485b7163b3 100644
--- 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/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js
new file mode 100644
index 00000000000000..5b2df294f7b96b
--- /dev/null
+++ b/docs/src/pages/guides/interoperability/EmotionTheme.js
@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import Button from '@material-ui/core/Button';
+import { ThemeProvider } from 'emotion-theming';
+import {
+  createMuiTheme,
+  ThemeProvider as MuiThemeProvider,
+  darken,
+} from '@material-ui/core/styles';
+
+const customTheme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#6772e5',
+    },
+  },
+});
+
+export default function EmotionTheme() {
+  return (
+    <MuiThemeProvider theme={customTheme}>
+      <ThemeProvider theme={customTheme}>
+        <Button>Default</Button>
+        <Button
+          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;
+            }
+          `}
+        >
+          Customized
+        </Button>
+      </ThemeProvider>
+    </MuiThemeProvider>
+  );
+}
diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx
new file mode 100644
index 00000000000000..5b2df294f7b96b
--- /dev/null
+++ b/docs/src/pages/guides/interoperability/EmotionTheme.tsx
@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import Button from '@material-ui/core/Button';
+import { ThemeProvider } from 'emotion-theming';
+import {
+  createMuiTheme,
+  ThemeProvider as MuiThemeProvider,
+  darken,
+} from '@material-ui/core/styles';
+
+const customTheme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#6772e5',
+    },
+  },
+});
+
+export default function EmotionTheme() {
+  return (
+    <MuiThemeProvider theme={customTheme}>
+      <ThemeProvider theme={customTheme}>
+        <Button>Default</Button>
+        <Button
+          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;
+            }
+          `}
+        >
+          Customized
+        </Button>
+      </ThemeProvider>
+    </MuiThemeProvider>
+  );
+}
diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js
index 305269d485d508..75ccbfe5b9160b 100644
--- 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
index 305269d485d508..75ccbfe5b9160b 100644
--- 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
index 2b5df4a3fac2ed..67637c8da73f0e 100644
--- 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
index 2b5df4a3fac2ed..67637c8da73f0e 100644
--- 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
index b417f5c2fbb009..562b4ef9c31590 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
+++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
@@ -1,47 +1,34 @@
 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 customTheme = 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;
+  ${theme.breakpoints.up('sm')} {
+    font-size: 14px;
+    padding: 7px 14px;
   }
   `}
 `;
@@ -49,9 +36,12 @@ const StyledButton = styled.button`
 export default function StyledComponentsTheme() {
   return (
     <NoSsr>
-      <ThemeProvider theme={defaultTheme}>
-        <StyledButton>Styled Components</StyledButton>
-      </ThemeProvider>
+      <MuiThemeProvider theme={customTheme}>
+        <ThemeProvider theme={customTheme}>
+          <Button>Default</Button>
+          <StyledButton>Customized</StyledButton>
+        </ThemeProvider>
+      </MuiThemeProvider>
     </NoSsr>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
index b417f5c2fbb009..562b4ef9c31590 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
+++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
@@ -1,47 +1,34 @@
 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 customTheme = 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;
+  ${theme.breakpoints.up('sm')} {
+    font-size: 14px;
+    padding: 7px 14px;
   }
   `}
 `;
@@ -49,9 +36,12 @@ const StyledButton = styled.button`
 export default function StyledComponentsTheme() {
   return (
     <NoSsr>
-      <ThemeProvider theme={defaultTheme}>
-        <StyledButton>Styled Components</StyledButton>
-      </ThemeProvider>
+      <MuiThemeProvider theme={customTheme}>
+        <ThemeProvider theme={customTheme}>
+          <Button>Default</Button>
+          <StyledButton>Customized</StyledButton>
+        </ThemeProvider>
+      </MuiThemeProvider>
     </NoSsr>
   );
 }
diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index 825a8043919ee3..47ae9cc7f971b0 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -1,6 +1,6 @@
 # Style Library Interoperability
 
-<p class="description">While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.</p>
+<p class="description">While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).</p>
 
 This guide aims to document the most popular alternatives,
 but you should find that the principals applied here can be adapted to other libraries.
@@ -15,18 +15,22 @@ There are examples for the following styling solutions:
 
 ## Plain CSS
 
-Nothing fancy, plain old CSS.
+Nothing fancy, just plain CSS.
+
+{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}}
+
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri)
 
 **PlainCssButton.css**
 ```css
 .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, .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;
+}
+.button:hover {
+  background-color: #5469d4;
 }
 ```
 
@@ -38,32 +42,89 @@ import Button from '@material-ui/core/Button';
 export default function PlainCssButton() {
   return (
     <div>
-      <Button>Material-UI</Button>
-      <Button className="button">Plain CSS</Button>
+      <Button>Default</Button>
+      <Button className="button">Customized</Button>
     </div>
   );
 }
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl)
+### Controlling priority ⚠️
 
-**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo.
+**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo:
+
+```jsx
+import { StylesProvider } from '@material-ui/core/styles';
+
+<StylesProvider injectFirst>
+  {/* Your component tree.
+      Now, you can override Material-UI's styles. */}
+</StylesProvider>
+```
+
+### Deeper elements
+
+If you attempt to style a Drawer with variant permanent,
+you will likely need to affect the Drawer's child paper element.
+However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work.
+You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI.
+
+The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself.
+
+{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}}
+
+**PlainCssButtonDeep.css**
+```css
+.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;
+}
+.button:hover {
+  background-color: #5469d4;
+}
+.button-label {
+  color: #fff;
+}
+```
+
+**PlainCssButtonDeep.js**
+
+```jsx
+import React from 'react';
+import Button from '@material-ui/core/Button';
+
+export default function PlainCssButtonDeep() {
+  return (
+    <div>
+      <Button>Default</Button>
+      <Button classes={{ root: 'button', label: 'button-label' }}>
+        Customized
+      </Button>
+    </div>
+  );
+}
+```
 
 ## Global CSS
 
 Explicitly providing the class names to the component is too much effort?
 [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core).
 
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e)
+
 **GlobalCssButton.css**
 ```css
 .MuiButton-root {
-  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, .3);
+  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;
+}
+.MuiButton-root:hover {
+  background-color: #5469d4;
+}
+.MuiButton-label {
+  color: #fff;
 }
 ```
 
@@ -73,17 +134,22 @@ import React from 'react';
 import Button from '@material-ui/core/Button';
 
 export default function GlobalCssButton() {
-  return (
-    <div>
-      <Button>Global CSS</Button>
-    </div>
-  );
+  return <Button>Customized</Button>;
 }
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp)
+### Controlling priority ⚠️
 
-**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo.
+**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo:
+
+```jsx
+import { StylesProvider } from '@material-ui/core/styles';
+
+<StylesProvider injectFirst>
+  {/* Your component tree.
+      Now, you can override Material-UI's styles. */}
+</StylesProvider>
+```
 
 ## Styled Components
 
@@ -92,11 +158,37 @@ export default function GlobalCssButton() {
 
 The `styled()` method works perfectly on all of the components.
 
-{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}}
+{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}}
+
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr)
+
+```jsx
+import React from 'react';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+
+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;
+  }
+`;
+
+export default function StyledComponents() {
+  return (
+    <div>
+      <Button>Default</Button>
+      <StyledButton>Customized</StyledButton>
+    </div>
+  );
+}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv)
+```
 
-### Controlling Priority
+### Controlling priority ⚠️
 
 **Note:** Both styled-components and JSS inject their styles at the bottom of the `<head>`.
 The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo:
@@ -106,7 +198,7 @@ import { StylesProvider } from '@material-ui/core/styles';
 
 <StylesProvider injectFirst>
   {/* Your component tree.
-      Styled components can override Material-UI's styles. */}
+      Now, you can override Material-UI's styles. */}
 </StylesProvider>
 ```
 
@@ -119,9 +211,37 @@ you will likely need to affect the Drawer's child paper element.
 However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work.
 You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI.
 
-The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component.
+The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself.
+It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component.
+
+{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}}
 
-{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}}
+```jsx
+import React from 'react';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+
+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: #fff;
+  }
+`;
+
+export default function StyledComponentsDeep() {
+  return (
+    <div>
+      <Button>Default</Button>
+      <StyledButton>Customized</StyledButton>
+    </div>
+  );
+}
+```
 
 The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`.
 
@@ -133,33 +253,53 @@ import Button from '@material-ui/core/Button';
 const StyledButton = styled(({ color, ...other }) => (
   <Button classes={{ label: 'label' }} {...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);
-
+  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;
+  }
   & .label {
-    color: ${props => props.color};
+    color: #fff;
   }
 `;
 
 export default function StyledComponentsDeep() {
   return (
     <div>
-      <Button>Material-UI</Button>
-      <StyledButton color="papayawhip">Styled Components</StyledButton>
+      <Button>Default</Button>
+      <StyledButton>Customized</StyledButton>
     </div>
   );
 }
 ```
 
-### ThemeProvider
+### Theme
 
 Material-UI has a rich theme structure that you can leverage for
 the color manipulations, the transitions, the media queries, and more.
 
+We encourage to share the same theme object between Material-UI and your styles.
+
+```jsx
+const StyledButton = styled(Button)`
+  ${({ theme }) => `
+  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;
+  }
+  `}
+`;
+```
+
 {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}}
 
 ### Portals
@@ -199,16 +339,20 @@ const StyledMenu = styled(({ className, ...props }) => (
 It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the
 bundling solution people are using.
 
+{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}}
+
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h)
+
 **CssModulesButton.css**
 ```css
 .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, .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;
+}
+.button:hover {
+  background-color: #5469d4;
 }
 ```
 
@@ -222,76 +366,153 @@ import Button from '@material-ui/core/Button';
 export default function CssModulesButton() {
   return (
     <div>
-      <Button>Material-UI</Button>
-      <Button className={styles.button}>CSS Modules</Button>
+      <Button>Default</Button>
+      <Button className={styles.button}>Customized</Button>
     </div>
   );
 }
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn)
+### Controlling priority ⚠️
 
-**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo.
+**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo:
 
-## Emotion
+```jsx
+import { StylesProvider } from '@material-ui/core/styles';
 
-![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star)
-![npm](https://img.shields.io/npm/dm/emotion.svg?)
+<StylesProvider injectFirst>
+  {/* Your component tree.
+      Now, you can override Material-UI's styles. */}
+</StylesProvider>
+```
 
-### The `css` prop
+### Deeper elements
 
-Emotion's **css()** method works seamlessly with Material-UI.
+If you attempt to style a Drawer with variant permanent,
+you will likely need to affect the Drawer's child paper element.
+However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work.
+You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI.
 
-{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}}
+The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself.
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j)
+{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}}
 
-**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo.
+**CssModulesButtonDeep.css**
+```css
+.root {
+  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;
+}
+.root:hover {
+  background-color: #5469d4;
+}
+.label {
+  color: #fff;
+}
+```
 
-### The `styled()` API
+**CssModulesButtonDeep.js**
 
-It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components).
+```jsx
+import React from 'react';
+// webpack, parcel or else will inject the CSS into the page
+import styles from './CssModulesButtonDeep.css';
+import Button from '@material-ui/core/Button';
+
+export default function CssModulesButtonDeep() {
+  return (
+    <div>
+      <Button>Default</Button>
+      <Button classes={styles}>Customized</Button>
+    </div>
+  );
+}
+```
+
+## Emotion
+
+![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star)
+![npm](https://img.shields.io/npm/dm/emotion.svg?)
 
-## React JSS
+### The `css` prop
 
-![stars](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star)
-![npm](https://img.shields.io/npm/dm/react-jss.svg?)
+Emotion's **css()** method works seamlessly with Material-UI.
 
-Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss).
-A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
+{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}}
+
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj)
 
 ```jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import injectSheet from 'react-jss';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import Button from '@material-ui/core/Button';
 
-const styles = {
-  button: {
-    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-    borderRadius: 3,
-    border: 0,
-    color: 'white',
-    height: 48,
-    padding: '0 30px',
-    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-  },
-};
-
-function ReactJssButton(props) {
+export default function EmotionCSS() {
   return (
     <div>
-      <Button>Material-UI</Button>
-      <Button className={props.classes.button}>react-jss</Button>
+      <Button>Default</Button>
+      <Button
+        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;
+          }
+        `}
+      >
+        Customized
+      </Button>
     </div>
   );
 }
+```
+
+### Controlling priority ⚠️
+
+**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo:
+
+```jsx
+import { StylesProvider } from '@material-ui/core/styles';
+
+<StylesProvider injectFirst>
+  {/* Your component tree.
+      Now, you can override Material-UI's styles. */}
+</StylesProvider>
+```
+
+### Theme
+
+Material-UI has a rich theme structure that you can leverage for
+the color manipulations, the transitions, the media queries, and more.
 
-ReactJssButton.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
+We encourage to share the same theme object between Material-UI and your styles.
 
-export default injectSheet(styles)(ReactJssButton);
+```jsx
+<Button
+  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;
+    }
+  `}
+>
+  Customized
+</Button>
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp)
+{{"demo": "pages/guides/interoperability/EmotionTheme.js"}}
+
+### The `styled()` API
+
+It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components).