From 3614f6f2d60876ce50c430d2b8261506d8bf93f8 Mon Sep 17 00:00:00 2001
From: Nemanja Milosaviljevic <nemanja.milosavljevic@kiwigrid.com>
Date: Mon, 16 Sep 2019 15:23:36 +0200
Subject: [PATCH 01/12] Documentation adjustment of  refs #17387

---
 CHANGELOG.md                                  |  2 +-
 docs/src/pages/styles/advanced/advanced-de.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-es.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-fr.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-ja.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-pt.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-ru.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-zh.md | 12 ++++++------
 docs/src/pages/styles/advanced/advanced.md    | 10 +++++-----
 docs/src/pages/styles/api/api-de.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-es.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-fr.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-ja.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-pt.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-ru.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-zh.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api.md              | 16 ++++++++--------
 docs/src/pages/styles/basics/basics-de.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-es.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-fr.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ja.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-pt.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ru.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-zh.md     |  8 ++++----
 docs/src/pages/styles/basics/basics.md        |  6 +++---
 25 files changed, 142 insertions(+), 142 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9a1c057ea8007..ca39458475c378 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8160,7 +8160,7 @@ The primary motivation for this change is simplicity, it's also making our inter
 `react-jss`.
 ```diff
 -import { withStyles, createStyleSheet } from 'material-ui/styles';
-+import { withStyles } from 'material-ui/styles';
++import { withStyles } from 'material-ui/core/styles';
 
 -const styleSheet = createStyleSheet('Button', {
 +const styles = {
diff --git a/docs/src/pages/styles/advanced/advanced-de.md b/docs/src/pages/styles/advanced/advanced-de.md
index d55ce3a467297a..c31dfaea517333 100644
--- a/docs/src/pages/styles/advanced/advanced-de.md
+++ b/docs/src/pages/styles/advanced/advanced-de.md
@@ -31,7 +31,7 @@ Möglicherweise müssen Sie auf die Themevariablen in Ihren React-Komponenten zu
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ Das Einfügen von Style-Tags erfolgt in der **gleichen Reihenfolge** wie die `ma
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ Die Klassennamen werden von dem [Klassennamengenerator](/styles/api/#creategener
 
 ### Standard
 
-Standardmäßig werden die Klassennamen von `@material-ui/styles`** nicht deterministisch** generiert; Man kann sich nicht darauf verlassen, dass sie gleich bleiben. Nehmen wir den folgenden Stil als Beispiel:
+Standardmäßig werden die Klassennamen von `@material-ui/core/styles`** nicht deterministisch** generiert; Man kann sich nicht darauf verlassen, dass sie gleich bleiben. Nehmen wir den folgenden Stil als Beispiel:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,4 @@ Dann müssen Sie dieses Nonce an JSS übergeben, damit es den nachfolgenden `<st
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/styles/advanced/advanced-es.md b/docs/src/pages/styles/advanced/advanced-es.md
index 9b0d59462bf56a..b409103ceae4b2 100644
--- a/docs/src/pages/styles/advanced/advanced-es.md
+++ b/docs/src/pages/styles/advanced/advanced-es.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-fr.md b/docs/src/pages/styles/advanced/advanced-fr.md
index 2bbc10ff838213..41129abfc0a390 100644
--- a/docs/src/pages/styles/advanced/advanced-fr.md
+++ b/docs/src/pages/styles/advanced/advanced-fr.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-ja.md b/docs/src/pages/styles/advanced/advanced-ja.md
index d87938dd644ef9..6bbd8d1e9bc653 100644
--- a/docs/src/pages/styles/advanced/advanced-ja.md
+++ b/docs/src/pages/styles/advanced/advanced-ja.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md
index 38247ee31e6d99..b20e7ae1b3af84 100644
--- a/docs/src/pages/styles/advanced/advanced-pt.md
+++ b/docs/src/pages/styles/advanced/advanced-pt.md
@@ -31,7 +31,7 @@ Você pode precisar acessar as variáveis de tema dentro de seus componentes Rea
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ A injeção de tags de estilo acontece na **mesma ordem** com as invocações de
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ Os nomes de classes são gerados pelo [gerador de nome de classe](/styles/api/#c
 
 ### Padrão
 
-Por padrão, os nomes de classes gerados por `@material-ui/styles` são **não determinísticos**; você não pode confiar que eles irão permanecer os mesmos. Vejamos a seguinte estilo como um exemplo:
+Por padrão, os nomes de classes gerados por `@material-ui/core/styles` são **não determinísticos**; você não pode confiar que eles irão permanecer os mesmos. Vejamos a seguinte estilo como um exemplo:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,4 @@ Então, você deve passar este nonce para o JSS para que ele possa adicioná-lo
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/styles/advanced/advanced-ru.md b/docs/src/pages/styles/advanced/advanced-ru.md
index 9fe280332fb9e9..3a1130a4c71a75 100644
--- a/docs/src/pages/styles/advanced/advanced-ru.md
+++ b/docs/src/pages/styles/advanced/advanced-ru.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-zh.md b/docs/src/pages/styles/advanced/advanced-zh.md
index de24cf65ad60e9..390497258a7733 100644
--- a/docs/src/pages/styles/advanced/advanced-zh.md
+++ b/docs/src/pages/styles/advanced/advanced-zh.md
@@ -26,12 +26,12 @@ function Theming() {
 
 ### 访问组件中的主题
 
-在组件中访问 @material-ui/styles 主题。
+在组件中访问 @material-ui/core/styles 主题。
 
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ import { StylesProvider } from '@material-ui/styles';
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### 默认值
 
-By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,4 @@ If you are using Server-Side Rendering (SSR), you should pass the nonce in the `
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
index d79bdbef6e8584..aaae683378ff69 100644
--- a/docs/src/pages/styles/advanced/advanced.md
+++ b/docs/src/pages/styles/advanced/advanced.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -251,7 +251,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -298,7 +298,7 @@ The simplest approach is to add an HTML comment to the `<head>` that determines
 
 ```jsx
 import { create } from 'jss';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 
 const jss = create({
   ...jssPreset(),
@@ -416,7 +416,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
diff --git a/docs/src/pages/styles/api/api-de.md b/docs/src/pages/styles/api/api-de.md
index 49924e870c2613..d5610dbd383b39 100644
--- a/docs/src/pages/styles/api/api-de.md
+++ b/docs/src/pages/styles/api/api-de.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">Die API-Referenz des @material-ui/styles Pakets.</p>
+<p class="description">Die API-Referenz des @material-ui/core/styles Pakets.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ Diese Funktion "macht zur Laufzeit nicht wirklich etwas", es ist nur die Identit
 #### Beispiele
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **Hook** Mu
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **styled co
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-es.md b/docs/src/pages/styles/api/api-es.md
index 258ba529a6f7fe..1f382086817c19 100644
--- a/docs/src/pages/styles/api/api-es.md
+++ b/docs/src/pages/styles/api/api-es.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/styles package.</p>
+<p class="description">The API reference of the @material-ui/core/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-fr.md b/docs/src/pages/styles/api/api-fr.md
index c1f9c83926aa98..cdb23e356b55b1 100644
--- a/docs/src/pages/styles/api/api-fr.md
+++ b/docs/src/pages/styles/api/api-fr.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/styles package.</p>
+<p class="description">The API reference of the @material-ui/core/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Exemples
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/code/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/code/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-ja.md b/docs/src/pages/styles/api/api-ja.md
index fd5cafe7b85c1f..3da9cdeac9342a 100644
--- a/docs/src/pages/styles/api/api-ja.md
+++ b/docs/src/pages/styles/api/api-ja.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/styles package.</p>
+<p class="description">The API reference of the @material-ui/code/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### 例
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -171,7 +171,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -346,7 +346,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/code/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -425,7 +425,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -445,7 +445,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -494,11 +494,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/code/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-pt.md b/docs/src/pages/styles/api/api-pt.md
index 39d2baceebc224..1ba802fef48d02 100644
--- a/docs/src/pages/styles/api/api-pt.md
+++ b/docs/src/pages/styles/api/api-pt.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">A referência da API do pacote @material-ui/styles.</p>
+<p class="description">A referência da API do pacote @material-ui/code/styles.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ Esta função realmente não "faz nada" em tempo de execução, é apenas uma fu
 #### Exemplos
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Vincula uma folha de estilo a um componente de função usando o padrão **hook*
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Vincula uma folha de estilos, com uma função de componente, usando o padrão d
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/code/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/code/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-ru.md b/docs/src/pages/styles/api/api-ru.md
index d90dd92ba30159..54e2690dcae75d 100644
--- a/docs/src/pages/styles/api/api-ru.md
+++ b/docs/src/pages/styles/api/api-ru.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/styles package.</p>
+<p class="description">The API reference of the @material-ui/code/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Примеры
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/code/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/code/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-zh.md b/docs/src/pages/styles/api/api-zh.md
index b8c7091ca4ad12..fd054abbda8558 100644
--- a/docs/src/pages/styles/api/api-zh.md
+++ b/docs/src/pages/styles/api/api-zh.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">@ material-ui/styles包的API参考。</p>
+<p class="description">@ material-ui/code/styles包的API参考。</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ export default function App() {
 #### 例子
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ export default MyComponent;
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ The method is an alternative to `.toString()` when you are rendering the whole p
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/code/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/code/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api.md b/docs/src/pages/styles/api/api.md
index 50f4bcf00729e2..f6eb1f5bfcf657 100644
--- a/docs/src/pages/styles/api/api.md
+++ b/docs/src/pages/styles/api/api.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/styles package.</p>
+<p class="description">The API reference of the @material-ui/code/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -51,7 +51,7 @@ style rules to `makeStyles`/`withStyles` which are a function of the `Theme`.
 #### Examples
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -93,7 +93,7 @@ the style sheet.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -180,7 +180,7 @@ Use the function signature if you need to have access to the theme. It's provide
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -275,7 +275,7 @@ This hook returns the `theme` object so it can be used inside a function compone
 
 ```jsx
 import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/code/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -318,7 +318,7 @@ Use the function signature if you need to have access to the theme. It's provide
 
 ```jsx
 import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -337,7 +337,7 @@ Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-propos
 
 ```jsx
 import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 
 const styles = {
   root: {
@@ -372,7 +372,7 @@ in the render method.
 
 ```jsx
 import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/code/styles';
 
 function MyComponent(props) {
   return <div>{props.theme.direction}</div>;
diff --git a/docs/src/pages/styles/basics/basics-de.md b/docs/src/pages/styles/basics/basics-de.md
index 8bb0d376913013..882347be9affac 100644
--- a/docs/src/pages/styles/basics/basics-de.md
+++ b/docs/src/pages/styles/basics/basics-de.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Hinweis: Dies gilt nur für aufrufende Syntax-Stil-Definitionen, die noch ein JS
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-es.md b/docs/src/pages/styles/basics/basics-es.md
index 88999383310003..ee2eb115d22fd3 100644
--- a/docs/src/pages/styles/basics/basics-es.md
+++ b/docs/src/pages/styles/basics/basics-es.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-fr.md b/docs/src/pages/styles/basics/basics-fr.md
index 5b4fc9032f7418..4d8f8e5439cb59 100644
--- a/docs/src/pages/styles/basics/basics-fr.md
+++ b/docs/src/pages/styles/basics/basics-fr.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-ja.md b/docs/src/pages/styles/basics/basics-ja.md
index a03e22cb365d6c..926bdfa5b1ffd4 100644
--- a/docs/src/pages/styles/basics/basics-ja.md
+++ b/docs/src/pages/styles/basics/basics-ja.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ export default function Hook() {
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-pt.md b/docs/src/pages/styles/basics/basics-pt.md
index 957099ed2151c6..cd8a96177012f4 100644
--- a/docs/src/pages/styles/basics/basics-pt.md
+++ b/docs/src/pages/styles/basics/basics-pt.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Nota: isso se aplica somente para a sintaxe de chamada – definições de estil
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-ru.md b/docs/src/pages/styles/basics/basics-ru.md
index dbfa89631e66b9..a2f2901e265a7f 100644
--- a/docs/src/pages/styles/basics/basics-ru.md
+++ b/docs/src/pages/styles/basics/basics-ru.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-zh.md b/docs/src/pages/styles/basics/basics-zh.md
index 02fb3c3b7ad188..e3b85541ee2f51 100644
--- a/docs/src/pages/styles/basics/basics-zh.md
+++ b/docs/src/pages/styles/basics/basics-zh.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 2e3d4a918b092a..330f37e23fbd7d 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -40,7 +40,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -70,7 +70,7 @@ You can also [change this behavior](/styles/advanced/#string-templates), with so
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -95,7 +95,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/code/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {

From 4bc45618a2cdd062eeb3e3709594ae54fbb78e61 Mon Sep 17 00:00:00 2001
From: Nemanja Milosaviljevic <nemanja.milosavljevic@kiwigrid.com>
Date: Mon, 16 Sep 2019 15:26:22 +0200
Subject: [PATCH 02/12] "Adjustment the documentation of the makeStyles method
 refs #17387"

This reverts commit 6c101de0aacbfe97c38fe0f141f625cd10482ff7.
---
 CHANGELOG.md                                  |  2 +-
 docs/src/pages/styles/advanced/advanced-de.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-es.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-fr.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-ja.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-pt.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-ru.md | 10 +++++-----
 docs/src/pages/styles/advanced/advanced-zh.md | 12 ++++++------
 docs/src/pages/styles/advanced/advanced.md    | 10 +++++-----
 docs/src/pages/styles/api/api-de.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-es.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-fr.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-ja.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-pt.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-ru.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api-zh.md           | 18 +++++++++---------
 docs/src/pages/styles/api/api.md              | 16 ++++++++--------
 docs/src/pages/styles/basics/basics-de.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-es.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-fr.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ja.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-pt.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ru.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-zh.md     |  8 ++++----
 docs/src/pages/styles/basics/basics.md        |  6 +++---
 25 files changed, 142 insertions(+), 142 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca39458475c378..a9a1c057ea8007 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8160,7 +8160,7 @@ The primary motivation for this change is simplicity, it's also making our inter
 `react-jss`.
 ```diff
 -import { withStyles, createStyleSheet } from 'material-ui/styles';
-+import { withStyles } from 'material-ui/core/styles';
++import { withStyles } from 'material-ui/styles';
 
 -const styleSheet = createStyleSheet('Button', {
 +const styles = {
diff --git a/docs/src/pages/styles/advanced/advanced-de.md b/docs/src/pages/styles/advanced/advanced-de.md
index c31dfaea517333..d55ce3a467297a 100644
--- a/docs/src/pages/styles/advanced/advanced-de.md
+++ b/docs/src/pages/styles/advanced/advanced-de.md
@@ -31,7 +31,7 @@ Möglicherweise müssen Sie auf die Themevariablen in Ihren React-Komponenten zu
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ Das Einfügen von Style-Tags erfolgt in der **gleichen Reihenfolge** wie die `ma
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ Die Klassennamen werden von dem [Klassennamengenerator](/styles/api/#creategener
 
 ### Standard
 
-Standardmäßig werden die Klassennamen von `@material-ui/core/styles`** nicht deterministisch** generiert; Man kann sich nicht darauf verlassen, dass sie gleich bleiben. Nehmen wir den folgenden Stil als Beispiel:
+Standardmäßig werden die Klassennamen von `@material-ui/styles`** nicht deterministisch** generiert; Man kann sich nicht darauf verlassen, dass sie gleich bleiben. Nehmen wir den folgenden Stil als Beispiel:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,4 @@ Dann müssen Sie dieses Nonce an JSS übergeben, damit es den nachfolgenden `<st
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/advanced/advanced-es.md b/docs/src/pages/styles/advanced/advanced-es.md
index b409103ceae4b2..9b0d59462bf56a 100644
--- a/docs/src/pages/styles/advanced/advanced-es.md
+++ b/docs/src/pages/styles/advanced/advanced-es.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-fr.md b/docs/src/pages/styles/advanced/advanced-fr.md
index 41129abfc0a390..2bbc10ff838213 100644
--- a/docs/src/pages/styles/advanced/advanced-fr.md
+++ b/docs/src/pages/styles/advanced/advanced-fr.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-ja.md b/docs/src/pages/styles/advanced/advanced-ja.md
index 6bbd8d1e9bc653..d87938dd644ef9 100644
--- a/docs/src/pages/styles/advanced/advanced-ja.md
+++ b/docs/src/pages/styles/advanced/advanced-ja.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md
index b20e7ae1b3af84..38247ee31e6d99 100644
--- a/docs/src/pages/styles/advanced/advanced-pt.md
+++ b/docs/src/pages/styles/advanced/advanced-pt.md
@@ -31,7 +31,7 @@ Você pode precisar acessar as variáveis de tema dentro de seus componentes Rea
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ A injeção de tags de estilo acontece na **mesma ordem** com as invocações de
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ Os nomes de classes são gerados pelo [gerador de nome de classe](/styles/api/#c
 
 ### Padrão
 
-Por padrão, os nomes de classes gerados por `@material-ui/core/styles` são **não determinísticos**; você não pode confiar que eles irão permanecer os mesmos. Vejamos a seguinte estilo como um exemplo:
+Por padrão, os nomes de classes gerados por `@material-ui/styles` são **não determinísticos**; você não pode confiar que eles irão permanecer os mesmos. Vejamos a seguinte estilo como um exemplo:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,4 @@ Então, você deve passar este nonce para o JSS para que ele possa adicioná-lo
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/advanced/advanced-ru.md b/docs/src/pages/styles/advanced/advanced-ru.md
index 3a1130a4c71a75..9fe280332fb9e9 100644
--- a/docs/src/pages/styles/advanced/advanced-ru.md
+++ b/docs/src/pages/styles/advanced/advanced-ru.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,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/styles/advanced/advanced-zh.md b/docs/src/pages/styles/advanced/advanced-zh.md
index 390497258a7733..de24cf65ad60e9 100644
--- a/docs/src/pages/styles/advanced/advanced-zh.md
+++ b/docs/src/pages/styles/advanced/advanced-zh.md
@@ -26,12 +26,12 @@ function Theming() {
 
 ### 访问组件中的主题
 
-在组件中访问 @material-ui/core/styles 主题。
+在组件中访问 @material-ui/styles 主题。
 
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ import { StylesProvider } from '@material-ui/styles';
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -402,7 +402,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### 默认值
 
-By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
@@ -567,4 +567,4 @@ If you are using Server-Side Rendering (SSR), you should pass the nonce in the `
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
index aaae683378ff69..d79bdbef6e8584 100644
--- a/docs/src/pages/styles/advanced/advanced.md
+++ b/docs/src/pages/styles/advanced/advanced.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -251,7 +251,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -298,7 +298,7 @@ The simplest approach is to add an HTML comment to the `<head>` that determines
 
 ```jsx
 import { create } from 'jss';
-import { StylesProvider, jssPreset } from '@material-ui/core/styles';
+import { StylesProvider, jssPreset } from '@material-ui/styles';
 
 const jss = create({
   ...jssPreset(),
@@ -416,7 +416,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
diff --git a/docs/src/pages/styles/api/api-de.md b/docs/src/pages/styles/api/api-de.md
index d5610dbd383b39..49924e870c2613 100644
--- a/docs/src/pages/styles/api/api-de.md
+++ b/docs/src/pages/styles/api/api-de.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">Die API-Referenz des @material-ui/core/styles Pakets.</p>
+<p class="description">Die API-Referenz des @material-ui/styles Pakets.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ Diese Funktion "macht zur Laufzeit nicht wirklich etwas", es ist nur die Identit
 #### Beispiele
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **Hook** Mu
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **styled co
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-es.md b/docs/src/pages/styles/api/api-es.md
index 1f382086817c19..258ba529a6f7fe 100644
--- a/docs/src/pages/styles/api/api-es.md
+++ b/docs/src/pages/styles/api/api-es.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/core/styles package.</p>
+<p class="description">The API reference of the @material-ui/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-fr.md b/docs/src/pages/styles/api/api-fr.md
index cdb23e356b55b1..c1f9c83926aa98 100644
--- a/docs/src/pages/styles/api/api-fr.md
+++ b/docs/src/pages/styles/api/api-fr.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/core/styles package.</p>
+<p class="description">The API reference of the @material-ui/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Exemples
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/code/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/code/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/code/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-ja.md b/docs/src/pages/styles/api/api-ja.md
index 3da9cdeac9342a..fd5cafe7b85c1f 100644
--- a/docs/src/pages/styles/api/api-ja.md
+++ b/docs/src/pages/styles/api/api-ja.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/code/styles package.</p>
+<p class="description">The API reference of the @material-ui/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### 例
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/code/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -171,7 +171,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -346,7 +346,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/code/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -425,7 +425,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -445,7 +445,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -494,11 +494,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/code/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-pt.md b/docs/src/pages/styles/api/api-pt.md
index 1ba802fef48d02..39d2baceebc224 100644
--- a/docs/src/pages/styles/api/api-pt.md
+++ b/docs/src/pages/styles/api/api-pt.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">A referência da API do pacote @material-ui/code/styles.</p>
+<p class="description">A referência da API do pacote @material-ui/styles.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ Esta função realmente não "faz nada" em tempo de execução, é apenas uma fu
 #### Exemplos
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/code/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Vincula uma folha de estilo a um componente de função usando o padrão **hook*
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Vincula uma folha de estilos, com uma função de componente, usando o padrão d
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/code/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/code/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-ru.md b/docs/src/pages/styles/api/api-ru.md
index 54e2690dcae75d..d90dd92ba30159 100644
--- a/docs/src/pages/styles/api/api-ru.md
+++ b/docs/src/pages/styles/api/api-ru.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/code/styles package.</p>
+<p class="description">The API reference of the @material-ui/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Примеры
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/code/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/code/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/code/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-zh.md b/docs/src/pages/styles/api/api-zh.md
index fd054abbda8558..b8c7091ca4ad12 100644
--- a/docs/src/pages/styles/api/api-zh.md
+++ b/docs/src/pages/styles/api/api-zh.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">@ material-ui/code/styles包的API参考。</p>
+<p class="description">@ material-ui/styles包的API参考。</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -49,7 +49,7 @@ export default function App() {
 #### 例子
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/code/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ export default MyComponent;
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ The method is an alternative to `.toString()` when you are rendering the whole p
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/code/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/code/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api.md b/docs/src/pages/styles/api/api.md
index f6eb1f5bfcf657..50f4bcf00729e2 100644
--- a/docs/src/pages/styles/api/api.md
+++ b/docs/src/pages/styles/api/api.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/code/styles package.</p>
+<p class="description">The API reference of the @material-ui/styles package.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -51,7 +51,7 @@ style rules to `makeStyles`/`withStyles` which are a function of the `Theme`.
 #### Examples
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/code/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -93,7 +93,7 @@ the style sheet.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -180,7 +180,7 @@ Use the function signature if you need to have access to the theme. It's provide
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -275,7 +275,7 @@ This hook returns the `theme` object so it can be used inside a function compone
 
 ```jsx
 import React from 'react';
-import { useTheme } from '@material-ui/code/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -318,7 +318,7 @@ Use the function signature if you need to have access to the theme. It's provide
 
 ```jsx
 import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -337,7 +337,7 @@ Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-propos
 
 ```jsx
 import React from 'react';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -372,7 +372,7 @@ in the render method.
 
 ```jsx
 import React from 'react';
-import { withTheme } from '@material-ui/code/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return <div>{props.theme.direction}</div>;
diff --git a/docs/src/pages/styles/basics/basics-de.md b/docs/src/pages/styles/basics/basics-de.md
index 882347be9affac..8bb0d376913013 100644
--- a/docs/src/pages/styles/basics/basics-de.md
+++ b/docs/src/pages/styles/basics/basics-de.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Hinweis: Dies gilt nur für aufrufende Syntax-Stil-Definitionen, die noch ein JS
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-es.md b/docs/src/pages/styles/basics/basics-es.md
index ee2eb115d22fd3..88999383310003 100644
--- a/docs/src/pages/styles/basics/basics-es.md
+++ b/docs/src/pages/styles/basics/basics-es.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-fr.md b/docs/src/pages/styles/basics/basics-fr.md
index 4d8f8e5439cb59..5b4fc9032f7418 100644
--- a/docs/src/pages/styles/basics/basics-fr.md
+++ b/docs/src/pages/styles/basics/basics-fr.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-ja.md b/docs/src/pages/styles/basics/basics-ja.md
index 926bdfa5b1ffd4..a03e22cb365d6c 100644
--- a/docs/src/pages/styles/basics/basics-ja.md
+++ b/docs/src/pages/styles/basics/basics-ja.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ export default function Hook() {
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-pt.md b/docs/src/pages/styles/basics/basics-pt.md
index cd8a96177012f4..957099ed2151c6 100644
--- a/docs/src/pages/styles/basics/basics-pt.md
+++ b/docs/src/pages/styles/basics/basics-pt.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Nota: isso se aplica somente para a sintaxe de chamada – definições de estil
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-ru.md b/docs/src/pages/styles/basics/basics-ru.md
index a2f2901e265a7f..dbfa89631e66b9 100644
--- a/docs/src/pages/styles/basics/basics-ru.md
+++ b/docs/src/pages/styles/basics/basics-ru.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-zh.md b/docs/src/pages/styles/basics/basics-zh.md
index e3b85541ee2f51..02fb3c3b7ad188 100644
--- a/docs/src/pages/styles/basics/basics-zh.md
+++ b/docs/src/pages/styles/basics/basics-zh.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 330f37e23fbd7d..2e3d4a918b092a 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -40,7 +40,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/code/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -70,7 +70,7 @@ You can also [change this behavior](/styles/advanced/#string-templates), with so
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/code/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -95,7 +95,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/code/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {

From 2fa642f3e67cf4b2f1e8b14697beb886628c0d79 Mon Sep 17 00:00:00 2001
From: Nemanja Milosaviljevic <nemanja.milosavljevic@kiwigrid.com>
Date: Mon, 16 Sep 2019 15:44:26 +0200
Subject: [PATCH 03/12] Adjust doc

---
 CHANGELOG.md                                  |  2 +-
 docs/pages/blog/material-ui-v4-is-out.md      |  2 +-
 docs/src/pages/styles/advanced/advanced-de.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-es.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-fr.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-ja.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-pt.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-ru.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-zh.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced.md    |  6 +++---
 docs/src/pages/styles/api/api-de.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-es.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-fr.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-ja.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-pt.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-ru.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-zh.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api.md              | 14 +++++++-------
 docs/src/pages/styles/basics/basics-de.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-es.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-fr.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ja.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-pt.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ru.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-zh.md     |  8 ++++----
 docs/src/pages/styles/basics/basics.md        |  6 +++---
 26 files changed, 127 insertions(+), 127 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9a1c057ea8007..2f78d21851b6a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3327,7 +3327,7 @@ Here is an example: https://codesandbox.io/s/vjzn5z4k77.
 ```jsx
 import Button from '@material-ui/core/Button';
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 // Like https://github.com/brunobertolini/styled-by
 const styledBy = (property, mapping) => props => mapping[props[property]];
diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md
index de38f6e0bb6fbe..c7c8be53357301 100644
--- a/docs/pages/blog/material-ui-v4-is-out.md
+++ b/docs/pages/blog/material-ui-v4-is-out.md
@@ -242,7 +242,7 @@ An example of the new spacing helper API.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
diff --git a/docs/src/pages/styles/advanced/advanced-de.md b/docs/src/pages/styles/advanced/advanced-de.md
index d55ce3a467297a..3b0d184173d75f 100644
--- a/docs/src/pages/styles/advanced/advanced-de.md
+++ b/docs/src/pages/styles/advanced/advanced-de.md
@@ -31,7 +31,7 @@ Möglicherweise müssen Sie auf die Themevariablen in Ihren React-Komponenten zu
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ Das Einfügen von Style-Tags erfolgt in der **gleichen Reihenfolge** wie die `ma
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,4 @@ Dann müssen Sie dieses Nonce an JSS übergeben, damit es den nachfolgenden `<st
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/styles/advanced/advanced-es.md b/docs/src/pages/styles/advanced/advanced-es.md
index 9b0d59462bf56a..b83e51603bf39e 100644
--- a/docs/src/pages/styles/advanced/advanced-es.md
+++ b/docs/src/pages/styles/advanced/advanced-es.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-fr.md b/docs/src/pages/styles/advanced/advanced-fr.md
index 2bbc10ff838213..cbfd61008a14de 100644
--- a/docs/src/pages/styles/advanced/advanced-fr.md
+++ b/docs/src/pages/styles/advanced/advanced-fr.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-ja.md b/docs/src/pages/styles/advanced/advanced-ja.md
index d87938dd644ef9..b6e4a60ed32f4b 100644
--- a/docs/src/pages/styles/advanced/advanced-ja.md
+++ b/docs/src/pages/styles/advanced/advanced-ja.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md
index 38247ee31e6d99..37e61c62ef09ff 100644
--- a/docs/src/pages/styles/advanced/advanced-pt.md
+++ b/docs/src/pages/styles/advanced/advanced-pt.md
@@ -31,7 +31,7 @@ Você pode precisar acessar as variáveis de tema dentro de seus componentes Rea
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ A injeção de tags de estilo acontece na **mesma ordem** com as invocações de
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,4 @@ Então, você deve passar este nonce para o JSS para que ele possa adicioná-lo
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/styles/advanced/advanced-ru.md b/docs/src/pages/styles/advanced/advanced-ru.md
index 9fe280332fb9e9..cbf0dd4df978ca 100644
--- a/docs/src/pages/styles/advanced/advanced-ru.md
+++ b/docs/src/pages/styles/advanced/advanced-ru.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-zh.md b/docs/src/pages/styles/advanced/advanced-zh.md
index de24cf65ad60e9..fd9adc0a0f401f 100644
--- a/docs/src/pages/styles/advanced/advanced-zh.md
+++ b/docs/src/pages/styles/advanced/advanced-zh.md
@@ -31,7 +31,7 @@ function Theming() {
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ import { StylesProvider } from '@material-ui/styles';
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,4 @@ If you are using Server-Side Rendering (SSR), you should pass the nonce in the `
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
\ No newline at end of file
+```
diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
index d79bdbef6e8584..7704d1743dc0ec 100644
--- a/docs/src/pages/styles/advanced/advanced.md
+++ b/docs/src/pages/styles/advanced/advanced.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -251,7 +251,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStylesBase = makeStyles({
   root: {
diff --git a/docs/src/pages/styles/api/api-de.md b/docs/src/pages/styles/api/api-de.md
index 49924e870c2613..52338e1d848ac2 100644
--- a/docs/src/pages/styles/api/api-de.md
+++ b/docs/src/pages/styles/api/api-de.md
@@ -49,7 +49,7 @@ Diese Funktion "macht zur Laufzeit nicht wirklich etwas", es ist nur die Identit
 #### Beispiele
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **Hook** Mu
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **styled co
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-es.md b/docs/src/pages/styles/api/api-es.md
index 258ba529a6f7fe..750a49b93d8d35 100644
--- a/docs/src/pages/styles/api/api-es.md
+++ b/docs/src/pages/styles/api/api-es.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Ejemplos
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-fr.md b/docs/src/pages/styles/api/api-fr.md
index c1f9c83926aa98..bd81c873e7c4d8 100644
--- a/docs/src/pages/styles/api/api-fr.md
+++ b/docs/src/pages/styles/api/api-fr.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Exemples
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-ja.md b/docs/src/pages/styles/api/api-ja.md
index fd5cafe7b85c1f..45139ad7235130 100644
--- a/docs/src/pages/styles/api/api-ja.md
+++ b/docs/src/pages/styles/api/api-ja.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### 例
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -171,7 +171,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -346,7 +346,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -425,7 +425,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -445,7 +445,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -494,11 +494,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-pt.md b/docs/src/pages/styles/api/api-pt.md
index 39d2baceebc224..f50c466f7941f3 100644
--- a/docs/src/pages/styles/api/api-pt.md
+++ b/docs/src/pages/styles/api/api-pt.md
@@ -49,7 +49,7 @@ Esta função realmente não "faz nada" em tempo de execução, é apenas uma fu
 #### Exemplos
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Vincula uma folha de estilo a um componente de função usando o padrão **hook*
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Vincula uma folha de estilos, com uma função de componente, usando o padrão d
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-ru.md b/docs/src/pages/styles/api/api-ru.md
index d90dd92ba30159..8aee896fc1cb7e 100644
--- a/docs/src/pages/styles/api/api-ru.md
+++ b/docs/src/pages/styles/api/api-ru.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Примеры
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api-zh.md b/docs/src/pages/styles/api/api-zh.md
index b8c7091ca4ad12..1290844374b5eb 100644
--- a/docs/src/pages/styles/api/api-zh.md
+++ b/docs/src/pages/styles/api/api-zh.md
@@ -49,7 +49,7 @@ export default function App() {
 #### 例子
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ export default MyComponent;
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ The method is an alternative to `.toString()` when you are rendering the whole p
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
\ No newline at end of file
+</code></pre>
diff --git a/docs/src/pages/styles/api/api.md b/docs/src/pages/styles/api/api.md
index 50f4bcf00729e2..6fe709420f8417 100644
--- a/docs/src/pages/styles/api/api.md
+++ b/docs/src/pages/styles/api/api.md
@@ -51,7 +51,7 @@ style rules to `makeStyles`/`withStyles` which are a function of the `Theme`.
 #### Examples
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -93,7 +93,7 @@ the style sheet.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -180,7 +180,7 @@ Use the function signature if you need to have access to the theme. It's provide
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -275,7 +275,7 @@ This hook returns the `theme` object so it can be used inside a function compone
 
 ```jsx
 import React from 'react';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -318,7 +318,7 @@ Use the function signature if you need to have access to the theme. It's provide
 
 ```jsx
 import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -337,7 +337,7 @@ Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-propos
 
 ```jsx
 import React from 'react';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
   root: {
@@ -372,7 +372,7 @@ in the render method.
 
 ```jsx
 import React from 'react';
-import { withTheme } from '@material-ui/styles';
+import { withTheme } from '@material-ui/core/styles';
 
 function MyComponent(props) {
   return <div>{props.theme.direction}</div>;
diff --git a/docs/src/pages/styles/basics/basics-de.md b/docs/src/pages/styles/basics/basics-de.md
index 8bb0d376913013..a63daa72ced076 100644
--- a/docs/src/pages/styles/basics/basics-de.md
+++ b/docs/src/pages/styles/basics/basics-de.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Hinweis: Dies gilt nur für aufrufende Syntax-Stil-Definitionen, die noch ein JS
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-es.md b/docs/src/pages/styles/basics/basics-es.md
index 88999383310003..b736a9bd31df87 100644
--- a/docs/src/pages/styles/basics/basics-es.md
+++ b/docs/src/pages/styles/basics/basics-es.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-fr.md b/docs/src/pages/styles/basics/basics-fr.md
index 5b4fc9032f7418..ad0c9822d434ab 100644
--- a/docs/src/pages/styles/basics/basics-fr.md
+++ b/docs/src/pages/styles/basics/basics-fr.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-ja.md b/docs/src/pages/styles/basics/basics-ja.md
index a03e22cb365d6c..e3ed5e3b2a2970 100644
--- a/docs/src/pages/styles/basics/basics-ja.md
+++ b/docs/src/pages/styles/basics/basics-ja.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ export default function Hook() {
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-pt.md b/docs/src/pages/styles/basics/basics-pt.md
index 957099ed2151c6..3c60f07ed87732 100644
--- a/docs/src/pages/styles/basics/basics-pt.md
+++ b/docs/src/pages/styles/basics/basics-pt.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Nota: isso se aplica somente para a sintaxe de chamada – definições de estil
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-ru.md b/docs/src/pages/styles/basics/basics-ru.md
index dbfa89631e66b9..f802864206e18c 100644
--- a/docs/src/pages/styles/basics/basics-ru.md
+++ b/docs/src/pages/styles/basics/basics-ru.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics-zh.md b/docs/src/pages/styles/basics/basics-zh.md
index 02fb3c3b7ad188..ac340ef9c2f65e 100644
--- a/docs/src/pages/styles/basics/basics-zh.md
+++ b/docs/src/pages/styles/basics/basics-zh.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
+{{"demo": "pages/styles/basics/StressTest.js"}}
diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 2e3d4a918b092a..951df1e9331d46 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -40,7 +40,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -70,7 +70,7 @@ You can also [change this behavior](/styles/advanced/#string-templates), with so
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -95,7 +95,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {

From e00aed1ab42c5a58433ae8e5e34f12e0aa669bde Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Fri, 27 Sep 2019 17:38:34 +0100
Subject: [PATCH 04/12] Don't update translations

---
 docs/src/pages/styles/advanced/advanced-de.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-es.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-fr.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-ja.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-pt.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-ru.md |  8 ++++----
 docs/src/pages/styles/advanced/advanced-zh.md |  8 ++++----
 docs/src/pages/styles/api/api-de.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-es.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-fr.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-ja.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-pt.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-ru.md           | 16 ++++++++--------
 docs/src/pages/styles/api/api-zh.md           | 16 ++++++++--------
 docs/src/pages/styles/basics/basics-de.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-es.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-fr.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ja.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-pt.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-ru.md     |  8 ++++----
 docs/src/pages/styles/basics/basics-zh.md     |  8 ++++----
 21 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/docs/src/pages/styles/advanced/advanced-de.md b/docs/src/pages/styles/advanced/advanced-de.md
index 3b0d184173d75f..d55ce3a467297a 100644
--- a/docs/src/pages/styles/advanced/advanced-de.md
+++ b/docs/src/pages/styles/advanced/advanced-de.md
@@ -31,7 +31,7 @@ Möglicherweise müssen Sie auf die Themevariablen in Ihren React-Komponenten zu
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ Das Einfügen von Style-Tags erfolgt in der **gleichen Reihenfolge** wie die `ma
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,4 @@ Dann müssen Sie dieses Nonce an JSS übergeben, damit es den nachfolgenden `<st
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/advanced/advanced-es.md b/docs/src/pages/styles/advanced/advanced-es.md
index b83e51603bf39e..9b0d59462bf56a 100644
--- a/docs/src/pages/styles/advanced/advanced-es.md
+++ b/docs/src/pages/styles/advanced/advanced-es.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-fr.md b/docs/src/pages/styles/advanced/advanced-fr.md
index cbfd61008a14de..2bbc10ff838213 100644
--- a/docs/src/pages/styles/advanced/advanced-fr.md
+++ b/docs/src/pages/styles/advanced/advanced-fr.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-ja.md b/docs/src/pages/styles/advanced/advanced-ja.md
index b6e4a60ed32f4b..d87938dd644ef9 100644
--- a/docs/src/pages/styles/advanced/advanced-ja.md
+++ b/docs/src/pages/styles/advanced/advanced-ja.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md
index 37e61c62ef09ff..38247ee31e6d99 100644
--- a/docs/src/pages/styles/advanced/advanced-pt.md
+++ b/docs/src/pages/styles/advanced/advanced-pt.md
@@ -31,7 +31,7 @@ Você pode precisar acessar as variáveis de tema dentro de seus componentes Rea
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ A injeção de tags de estilo acontece na **mesma ordem** com as invocações de
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,4 @@ Então, você deve passar este nonce para o JSS para que ele possa adicioná-lo
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/advanced/advanced-ru.md b/docs/src/pages/styles/advanced/advanced-ru.md
index cbf0dd4df978ca..9fe280332fb9e9 100644
--- a/docs/src/pages/styles/advanced/advanced-ru.md
+++ b/docs/src/pages/styles/advanced/advanced-ru.md
@@ -31,7 +31,7 @@ You might need to access the theme variables inside your React components.
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` /
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,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/styles/advanced/advanced-zh.md b/docs/src/pages/styles/advanced/advanced-zh.md
index fd9adc0a0f401f..de24cf65ad60e9 100644
--- a/docs/src/pages/styles/advanced/advanced-zh.md
+++ b/docs/src/pages/styles/advanced/advanced-zh.md
@@ -31,7 +31,7 @@ function Theming() {
 #### `useTheme` hook
 
 ```jsx
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 function DeepChild() {
   const theme = useTheme();
@@ -44,7 +44,7 @@ function DeepChild() {
 #### `withTheme` HOC
 
 ```jsx
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
@@ -241,7 +241,7 @@ import { StylesProvider } from '@material-ui/styles';
 
 ```jsx
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStylesBase = makeStyles({
   root: {
@@ -567,4 +567,4 @@ If you are using Server-Side Rendering (SSR), you should pass the nonce in the `
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-de.md b/docs/src/pages/styles/api/api-de.md
index 52338e1d848ac2..49924e870c2613 100644
--- a/docs/src/pages/styles/api/api-de.md
+++ b/docs/src/pages/styles/api/api-de.md
@@ -49,7 +49,7 @@ Diese Funktion "macht zur Laufzeit nicht wirklich etwas", es ist nur die Identit
 #### Beispiele
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **Hook** Mu
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **styled co
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-es.md b/docs/src/pages/styles/api/api-es.md
index 750a49b93d8d35..258ba529a6f7fe 100644
--- a/docs/src/pages/styles/api/api-es.md
+++ b/docs/src/pages/styles/api/api-es.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Ejemplos
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-fr.md b/docs/src/pages/styles/api/api-fr.md
index bd81c873e7c4d8..c1f9c83926aa98 100644
--- a/docs/src/pages/styles/api/api-fr.md
+++ b/docs/src/pages/styles/api/api-fr.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Exemples
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-ja.md b/docs/src/pages/styles/api/api-ja.md
index 45139ad7235130..fd5cafe7b85c1f 100644
--- a/docs/src/pages/styles/api/api-ja.md
+++ b/docs/src/pages/styles/api/api-ja.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### 例
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -171,7 +171,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -346,7 +346,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -425,7 +425,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -445,7 +445,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -494,11 +494,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-pt.md b/docs/src/pages/styles/api/api-pt.md
index f50c466f7941f3..39d2baceebc224 100644
--- a/docs/src/pages/styles/api/api-pt.md
+++ b/docs/src/pages/styles/api/api-pt.md
@@ -49,7 +49,7 @@ Esta função realmente não "faz nada" em tempo de execução, é apenas uma fu
 #### Exemplos
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Vincula uma folha de estilo a um componente de função usando o padrão **hook*
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Vincula uma folha de estilos, com uma função de componente, usando o padrão d
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-ru.md b/docs/src/pages/styles/api/api-ru.md
index 8aee896fc1cb7e..d90dd92ba30159 100644
--- a/docs/src/pages/styles/api/api-ru.md
+++ b/docs/src/pages/styles/api/api-ru.md
@@ -49,7 +49,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu
 #### Примеры
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ Link a style sheet with a function component using the **hook** pattern.
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/api/api-zh.md b/docs/src/pages/styles/api/api-zh.md
index 1290844374b5eb..b8c7091ca4ad12 100644
--- a/docs/src/pages/styles/api/api-zh.md
+++ b/docs/src/pages/styles/api/api-zh.md
@@ -49,7 +49,7 @@ export default function App() {
 #### 例子
 
 ```jsx
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
@@ -86,7 +86,7 @@ export default MyComponent;
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles({
   root: {
@@ -169,7 +169,7 @@ The method is an alternative to `.toString()` when you are rendering the whole p
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',
@@ -344,7 +344,7 @@ ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/styles';
 
 export default function MyComponent() {
   const theme = useTheme();
@@ -423,7 +423,7 @@ export default function MyComponent() {
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -443,7 +443,7 @@ export default withStyles(styles)(MyComponent);
   </p>
   
   <pre><code class="jsx">import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -492,11 +492,11 @@ export default MyComponent
   </h4>
   
   <pre><code class="jsx">import React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
 
 function MyComponent(props) {
   return &lt;div&gt;{props.theme.direction}&lt;/div&gt;;
 }
 
 export default withTheme(MyComponent);
-</code></pre>
+</code></pre>
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-de.md b/docs/src/pages/styles/basics/basics-de.md
index a63daa72ced076..8bb0d376913013 100644
--- a/docs/src/pages/styles/basics/basics-de.md
+++ b/docs/src/pages/styles/basics/basics-de.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Hinweis: Dies gilt nur für aufrufende Syntax-Stil-Definitionen, die noch ein JS
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-es.md b/docs/src/pages/styles/basics/basics-es.md
index b736a9bd31df87..88999383310003 100644
--- a/docs/src/pages/styles/basics/basics-es.md
+++ b/docs/src/pages/styles/basics/basics-es.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-fr.md b/docs/src/pages/styles/basics/basics-fr.md
index ad0c9822d434ab..5b4fc9032f7418 100644
--- a/docs/src/pages/styles/basics/basics-fr.md
+++ b/docs/src/pages/styles/basics/basics-fr.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-ja.md b/docs/src/pages/styles/basics/basics-ja.md
index e3ed5e3b2a2970..a03e22cb365d6c 100644
--- a/docs/src/pages/styles/basics/basics-ja.md
+++ b/docs/src/pages/styles/basics/basics-ja.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ export default function Hook() {
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-pt.md b/docs/src/pages/styles/basics/basics-pt.md
index 3c60f07ed87732..957099ed2151c6 100644
--- a/docs/src/pages/styles/basics/basics-pt.md
+++ b/docs/src/pages/styles/basics/basics-pt.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Nota: isso se aplica somente para a sintaxe de chamada – definições de estil
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-ru.md b/docs/src/pages/styles/basics/basics-ru.md
index f802864206e18c..dbfa89631e66b9 100644
--- a/docs/src/pages/styles/basics/basics-ru.md
+++ b/docs/src/pages/styles/basics/basics-ru.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/styles/basics/basics-zh.md b/docs/src/pages/styles/basics/basics-zh.md
index ac340ef9c2f65e..02fb3c3b7ad188 100644
--- a/docs/src/pages/styles/basics/basics-zh.md
+++ b/docs/src/pages/styles/basics/basics-zh.md
@@ -36,7 +36,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ Note: this only applies to the calling syntax – style definitions still use a
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -90,7 +90,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -193,4 +193,4 @@ const useStyles = makeStyles(theme => ({
 }));
 ```
 
-{{"demo": "pages/styles/basics/StressTest.js"}}
+{{"demo": "pages/styles/basics/StressTest.js"}}
\ No newline at end of file

From fbf020756714c7178ffbeacd26944215132e29e9 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sat, 28 Sep 2019 13:30:59 +0100
Subject: [PATCH 05/12] Revise basics.md for core/styles

---
 .../styles/basics/HigherOrderComponent.js     |   8 +-
 .../styles/basics/HigherOrderComponent.tsx    |   6 +-
 docs/src/pages/styles/basics/Hook.js          |   7 +-
 docs/src/pages/styles/basics/Hook.tsx         |   7 +-
 .../pages/styles/basics/StyledComponents.js   |   6 +-
 .../pages/styles/basics/StyledComponents.tsx  |   6 +-
 docs/src/pages/styles/basics/basics.md        | 125 ++++--------------
 7 files changed, 46 insertions(+), 119 deletions(-)

diff --git a/docs/src/pages/styles/basics/HigherOrderComponent.js b/docs/src/pages/styles/basics/HigherOrderComponent.js
index a9114acc560765..c43046b4795acd 100644
--- a/docs/src/pages/styles/basics/HigherOrderComponent.js
+++ b/docs/src/pages/styles/basics/HigherOrderComponent.js
@@ -15,13 +15,13 @@ const styles = {
   },
 };
 
-function HigherOrderComponent(props) {
+function HocComponent(props) {
   const { classes } = props;
-  return <Button className={classes.root}>Higher-order component</Button>;
+  return <Button className={classes.root}>Styled with HOC API</Button>;
 }
 
-HigherOrderComponent.propTypes = {
+HocComponent.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(HigherOrderComponent);
+export default withStyles(styles)(HocComponent);
diff --git a/docs/src/pages/styles/basics/HigherOrderComponent.tsx b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
index 25a18d6dc3c1e4..611066d05ba9cb 100644
--- a/docs/src/pages/styles/basics/HigherOrderComponent.tsx
+++ b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
@@ -14,9 +14,9 @@ const styles = createStyles({
   },
 });
 
-function HigherOrderComponent(props: WithStyles<typeof styles>) {
+function HocComponent(props: WithStyles<typeof styles>) {
   const { classes } = props;
-  return <Button className={classes.root}>Higher-order component</Button>;
+  return <Button className={classes.root}>Styled with HOC API</Button>;
 }
 
-export default withStyles(styles)(HigherOrderComponent);
+export default withStyles(styles)(HocComponent);
diff --git a/docs/src/pages/styles/basics/Hook.js b/docs/src/pages/styles/basics/Hook.js
index d12a7f6e3ae36a..19eb028136d0af 100644
--- a/docs/src/pages/styles/basics/Hook.js
+++ b/docs/src/pages/styles/basics/Hook.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';
 
 const useStyles = makeStyles({
@@ -14,8 +14,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function Hook() {
+export default function HookFunctionComponent() {
   const classes = useStyles();
-
-  return <Button className={classes.root}>Hook</Button>;
+  return <Button className={classes.root}>Styled with Hook API</Button>;
 }
diff --git a/docs/src/pages/styles/basics/Hook.tsx b/docs/src/pages/styles/basics/Hook.tsx
index d12a7f6e3ae36a..19eb028136d0af 100644
--- a/docs/src/pages/styles/basics/Hook.tsx
+++ b/docs/src/pages/styles/basics/Hook.tsx
@@ -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';
 
 const useStyles = makeStyles({
@@ -14,8 +14,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function Hook() {
+export default function HookFunctionComponent() {
   const classes = useStyles();
-
-  return <Button className={classes.root}>Hook</Button>;
+  return <Button className={classes.root}>Styled with Hook API</Button>;
 }
diff --git a/docs/src/pages/styles/basics/StyledComponents.js b/docs/src/pages/styles/basics/StyledComponents.js
index ba03a78eed3597..2b4e5e334763be 100644
--- a/docs/src/pages/styles/basics/StyledComponents.js
+++ b/docs/src/pages/styles/basics/StyledComponents.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -12,6 +12,6 @@ const MyButton = styled(Button)({
   padding: '0 30px',
 });
 
-export default function StyledComponents() {
-  return <MyButton>Styled Components</MyButton>;
+export default function ScComponent() {
+  return <MyButton>Styled with styled-components API</MyButton>;
 }
diff --git a/docs/src/pages/styles/basics/StyledComponents.tsx b/docs/src/pages/styles/basics/StyledComponents.tsx
index ba03a78eed3597..2b4e5e334763be 100644
--- a/docs/src/pages/styles/basics/StyledComponents.tsx
+++ b/docs/src/pages/styles/basics/StyledComponents.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -12,6 +12,6 @@ const MyButton = styled(Button)({
   padding: '0 30px',
 });
 
-export default function StyledComponents() {
-  return <MyButton>Styled Components</MyButton>;
+export default function ScComponent() {
+  return <MyButton>Styled with styled-components API</MyButton>;
 }
diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 951df1e9331d46..9498dd93c2f8f9 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -1,128 +1,54 @@
-# @material-ui/styles
+# @material-ui/core/styles
 
 <p class="description">You can use Material-UI's styling solution in your app, whether or not you are using Material-UI components.</p>
 
 Material-UI aims to provide a strong foundation for building dynamic UIs.
-For the sake of simplicity, **we expose the styling solution used in Material-UI components** as the `@material-ui/styles` package.
+For the sake of simplicity, the styling solution used in Material-UI components is exported from `@material-ui/core/styles`.
 You can use it, but you don't have to, since Material-UI is also [interoperable with](/guides/interoperability/) all the other major styling solutions.
 
 ## Why use Material-UI's styling solution?
 
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited.
-[A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations,
-and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
+[A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes the limitations of CSS, and inline styles,
+and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.):
 
-Material-UI's styling solution is inspired by many other styling libraries such as [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 has [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/master/packages/material-ui-benchmark/README.md#material-uistyles).
 - 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
 - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side.
-- 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles); and no bundle size increase if used alongside Material-UI.
-
-## Installation
-
-To install and save in your `package.json` dependencies, run:
-
-```sh
-// with npm
-npm install @material-ui/styles
-
-// with yarn
-yarn add @material-ui/styles
-```
+- 📦 No bundle size increase if used alongside Material-UI.
 
 ## Getting started
 
-There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
-
-### Hook API
-
-```jsx
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-
-const useStyles = makeStyles({
-  root: {
-    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-    border: 0,
-    borderRadius: 3,
-    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-    color: 'white',
-    height: 48,
-    padding: '0 30px',
-  },
-});
-
-export default function Hook() {
-  const classes = useStyles();
-  return <Button className={classes.root}>Hook</Button>;
-}
-```
-
-{{"demo": "pages/styles/basics/Hook.js"}}
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic:
 
-### Styled components API
+- Hook API
+- Higher-order component API
+- Styled-components API
 
-Note: this only applies to the calling syntax – style definitions still use a JSS object.
-You can also [change this behavior](/styles/advanced/#string-templates), with some limitations.
+### Hook API
 
-```jsx
-import React from 'react';
-import { styled } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-
-const MyButton = styled(Button)({
-  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-  border: 0,
-  borderRadius: 3,
-  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-  color: 'white',
-  height: 48,
-  padding: '0 30px',
-});
+Hooks can only be used with function components.
 
-export default function StyledComponents() {
-  return <MyButton>Styled Components</MyButton>;
-}
-```
+#### `@material-ui/core/styles/makeStyles`
 
-{{"demo": "pages/styles/basics/StyledComponents.js"}}
+{{"demo": "pages/styles/basics/Hook.js", "defaultCodeOpen": true}}
 
 ### Higher-order component API
 
-```jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+#### `@material-ui/core/styles/withStyles`
 
-const styles = {
-  root: {
-    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-    border: 0,
-    borderRadius: 3,
-    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-    color: 'white',
-    height: 48,
-    padding: '0 30px',
-  },
-};
+This is helpful if you use class components, and can't use the hook API.
 
-function HigherOrderComponent(props) {
-  const { classes } = props;
-  return <Button className={classes.root}>Higher-order component</Button>;
-}
+{{"demo": "pages/styles/basics/HigherOrderComponent.js", "defaultCodeOpen": true}}
 
-HigherOrderComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
+### Styled components API
 
-export default withStyles(styles)(HigherOrderComponent);
-```
+#### `@material-ui/core/styles/styled`
+
+Note: this only applies to the calling syntax – style definitions still use a JSS object.
+You can also [change this to allow CSS](/styles/advanced/#string-templates), with some limitations.
 
-{{"demo": "pages/styles/basics/HigherOrderComponent.js"}}
+{{"demo": "pages/styles/basics/StyledComponents.js", "defaultCodeOpen": true}}
 
 ## Nesting selectors
 
@@ -150,7 +76,10 @@ const useStyles = makeStyles({
 
 You can pass a function to `makeStyles` ("interpolation")
 in order to adapt the generated value based on the component's props.
-The function can be provided at the style rule level, or at the CSS property level:
+The function can be provided at the style rule level, or at the CSS property level.
+
+The following example uses the Hook API, but it works the same way with the other APIs
+(see below for examples).
 
 ```jsx
 const useStyles = makeStyles({

From ca88fc9bc0646b6d7c7b9c66efa76d72e0efe1e7 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sat, 28 Sep 2019 17:55:10 +0100
Subject: [PATCH 06/12] Update exports, advanced and API docs

---
 docs/src/pages/styles/advanced/GlobalCss.js   |   2 +-
 docs/src/pages/styles/advanced/GlobalCss.tsx  |   2 +-
 .../pages/styles/advanced/HybridGlobalCss.js  |   2 +-
 .../pages/styles/advanced/HybridGlobalCss.tsx |   2 +-
 .../pages/styles/advanced/StringTemplates.js  |   2 +-
 .../src/pages/styles/advanced/ThemeNesting.js |   2 +-
 .../pages/styles/advanced/ThemeNesting.tsx    |   2 +-
 docs/src/pages/styles/advanced/Theming.js     |   2 +-
 docs/src/pages/styles/advanced/Theming.tsx    |   2 +-
 docs/src/pages/styles/advanced/UseTheme.js    |   2 +-
 docs/src/pages/styles/advanced/UseTheme.tsx   |   2 +-
 docs/src/pages/styles/advanced/WithTheme.js   |   2 +-
 docs/src/pages/styles/advanced/WithTheme.tsx  |   2 +-
 docs/src/pages/styles/advanced/advanced.md    |  37 +++---
 docs/src/pages/styles/api/api.md              |  10 +-
 docs/src/pages/styles/basics/StressTest.js    |   2 +-
 docs/src/pages/styles/basics/StressTest.tsx   |   2 +-
 docs/src/pages/styles/basics/basics.md        | 125 ++++++++++++++----
 18 files changed, 140 insertions(+), 62 deletions(-)

diff --git a/docs/src/pages/styles/advanced/GlobalCss.js b/docs/src/pages/styles/advanced/GlobalCss.js
index 23595e4dfb3c80..41997ffa3ed976 100644
--- a/docs/src/pages/styles/advanced/GlobalCss.js
+++ b/docs/src/pages/styles/advanced/GlobalCss.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   '@global': {
diff --git a/docs/src/pages/styles/advanced/GlobalCss.tsx b/docs/src/pages/styles/advanced/GlobalCss.tsx
index 23595e4dfb3c80..41997ffa3ed976 100644
--- a/docs/src/pages/styles/advanced/GlobalCss.tsx
+++ b/docs/src/pages/styles/advanced/GlobalCss.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   '@global': {
diff --git a/docs/src/pages/styles/advanced/HybridGlobalCss.js b/docs/src/pages/styles/advanced/HybridGlobalCss.js
index 6437cab7af059c..e633a7916daab2 100644
--- a/docs/src/pages/styles/advanced/HybridGlobalCss.js
+++ b/docs/src/pages/styles/advanced/HybridGlobalCss.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';
 
 const useStyles = makeStyles({
   root: {
diff --git a/docs/src/pages/styles/advanced/HybridGlobalCss.tsx b/docs/src/pages/styles/advanced/HybridGlobalCss.tsx
index 6437cab7af059c..e633a7916daab2 100644
--- a/docs/src/pages/styles/advanced/HybridGlobalCss.tsx
+++ b/docs/src/pages/styles/advanced/HybridGlobalCss.tsx
@@ -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';
 
 const useStyles = makeStyles({
   root: {
diff --git a/docs/src/pages/styles/advanced/StringTemplates.js b/docs/src/pages/styles/advanced/StringTemplates.js
index fbc3d00f26089e..e3fdaac6fa586d 100644
--- a/docs/src/pages/styles/advanced/StringTemplates.js
+++ b/docs/src/pages/styles/advanced/StringTemplates.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { jssPreset, StylesProvider, makeStyles } from '@material-ui/styles';
+import { jssPreset, StylesProvider, makeStyles } from '@material-ui/core/styles';
 import { create } from 'jss';
 import jssTemplate from 'jss-plugin-template';
 
diff --git a/docs/src/pages/styles/advanced/ThemeNesting.js b/docs/src/pages/styles/advanced/ThemeNesting.js
index 73c152b650f248..3052eb8f3a7ad1 100644
--- a/docs/src/pages/styles/advanced/ThemeNesting.js
+++ b/docs/src/pages/styles/advanced/ThemeNesting.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, makeStyles } from '@material-ui/styles';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/docs/src/pages/styles/advanced/ThemeNesting.tsx b/docs/src/pages/styles/advanced/ThemeNesting.tsx
index 829449e620f860..84d8252995ed0c 100644
--- a/docs/src/pages/styles/advanced/ThemeNesting.tsx
+++ b/docs/src/pages/styles/advanced/ThemeNesting.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, makeStyles, createStyles } from '@material-ui/styles';
+import { ThemeProvider, makeStyles, createStyles } from '@material-ui/core/styles';
 
 interface MyTheme {
   background: string;
diff --git a/docs/src/pages/styles/advanced/Theming.js b/docs/src/pages/styles/advanced/Theming.js
index 454d41473b9821..72eac10f5b7466 100644
--- a/docs/src/pages/styles/advanced/Theming.js
+++ b/docs/src/pages/styles/advanced/Theming.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, makeStyles } from '@material-ui/styles';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/docs/src/pages/styles/advanced/Theming.tsx b/docs/src/pages/styles/advanced/Theming.tsx
index 5dc56b7e432ead..bc5e7ab1e604a0 100644
--- a/docs/src/pages/styles/advanced/Theming.tsx
+++ b/docs/src/pages/styles/advanced/Theming.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, makeStyles } from '@material-ui/styles';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: typeof themeInstance) => ({
   root: {
diff --git a/docs/src/pages/styles/advanced/UseTheme.js b/docs/src/pages/styles/advanced/UseTheme.js
index eb15a4ec63e231..c939b60caaba7c 100644
--- a/docs/src/pages/styles/advanced/UseTheme.js
+++ b/docs/src/pages/styles/advanced/UseTheme.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, useTheme } from '@material-ui/styles';
+import { ThemeProvider, useTheme } from '@material-ui/core/styles';
 
 function DeepChild() {
   const theme = useTheme();
diff --git a/docs/src/pages/styles/advanced/UseTheme.tsx b/docs/src/pages/styles/advanced/UseTheme.tsx
index 6637bf462c0be2..e05bcafbff0562 100644
--- a/docs/src/pages/styles/advanced/UseTheme.tsx
+++ b/docs/src/pages/styles/advanced/UseTheme.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, useTheme } from '@material-ui/styles';
+import { ThemeProvider, useTheme } from '@material-ui/core/styles';
 
 interface MyTheme {
   spacing: string;
diff --git a/docs/src/pages/styles/advanced/WithTheme.js b/docs/src/pages/styles/advanced/WithTheme.js
index 892c02c7fbfa5c..0e00189e334b06 100644
--- a/docs/src/pages/styles/advanced/WithTheme.js
+++ b/docs/src/pages/styles/advanced/WithTheme.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider, withTheme } from '@material-ui/styles';
+import { ThemeProvider, withTheme } from '@material-ui/core/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
diff --git a/docs/src/pages/styles/advanced/WithTheme.tsx b/docs/src/pages/styles/advanced/WithTheme.tsx
index 04e9cd9b5379a6..ccf81f9eac86e3 100644
--- a/docs/src/pages/styles/advanced/WithTheme.tsx
+++ b/docs/src/pages/styles/advanced/WithTheme.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, WithTheme as WithThemeProps, withTheme } from '@material-ui/styles';
+import { ThemeProvider, WithTheme as WithThemeProps, withTheme } from '@material-ui/core/styles';
 
 interface Theme {
   spacing: string;
diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
index 7704d1743dc0ec..3809e983c6f560 100644
--- a/docs/src/pages/styles/advanced/advanced.md
+++ b/docs/src/pages/styles/advanced/advanced.md
@@ -1,13 +1,16 @@
 # Advanced
 
-<p class="description">This section covers more advanced usage of @material-ui/styles.</p>
+<p class="description">This section covers more advanced usage of @material-ui/core/styles.</p>
 
 ## Theming
 
-Add a `ThemeProvider` to the top level of your app to pass the theme down the React component tree. Then, you can access the theme object in style functions.
+Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions.
+
+> This example creates a new theme. See the [theming section](/customization/theming) for how to customize the default Material-UI theme.
 
 ```jsx
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
+import DeepChild from './my_components/DeepChild';
 
 const theme = {
   background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
@@ -30,6 +33,8 @@ You might need to access the theme variables inside your React components.
 
 #### `useTheme` hook
 
+For use in function components:
+
 ```jsx
 import { useTheme } from '@material-ui/core/styles';
 
@@ -43,6 +48,8 @@ function DeepChild() {
 
 #### `withTheme` HOC
 
+For use in class or function components:
+
 ```jsx
 import { withTheme } from '@material-ui/core/styles';
 
@@ -114,7 +121,7 @@ function Parent() {
 
 However, the class names are often non-deterministic. How can a parent component override the style of a nested element?
 
-### withStyles
+### `withStyles`
 
 This is the simplest case. the wrapped component accepts a `classes` prop,
 it simply merges the class names provided with the style sheet.
@@ -136,7 +143,7 @@ function Parent() {
 }
 ```
 
-### makeStyles
+### `makeStyles`
 
 The hook API requires a bit more work. You have to forward the parent props to the hook as a first argument.
 
@@ -182,7 +189,7 @@ Of course, you are free to use additional plugins. Here is an example with the [
 
 ```jsx
 import { create } from 'jss';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 import rtl from 'jss-rtl'
 
 const jss = create({
@@ -237,7 +244,7 @@ They gain more specificity than any other style tags on your page e.g. CSS modul
 The `StylesProvider` component has an `injectFirst` prop to inject the style tags **first** in the head (less priority):
 
 ```jsx
-import { StylesProvider } from '@material-ui/styles';
+import { StylesProvider } from '@material-ui/core/styles';
 
 <StylesProvider injectFirst>
   {/* Your component tree.
@@ -298,7 +305,7 @@ The simplest approach is to add an HTML comment to the `<head>` that determines
 
 ```jsx
 import { create } from 'jss';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 
 const jss = create({
   ...jssPreset(),
@@ -313,7 +320,7 @@ function App() {
 export default App;
 ```
 
-#### Other HTML element
+#### Other HTML elements
 
 [Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build.
 To get around this issue, you can provide a DOM element (other than a comment) as the JSS insertion point, for example, a `<noscript>` element:
@@ -327,7 +334,7 @@ To get around this issue, you can provide a DOM element (other than a comment) a
 
 ```jsx
 import { create } from 'jss';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 
 const jss = create({
   ...jssPreset(),
@@ -349,7 +356,7 @@ To get around this issue, you can use the JavaScript `document.createComment()`
 
 ```jsx
 import { create } from 'jss';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 
 const styleNode = document.createComment('jss-insertion-point');
 document.head.insertBefore(styleNode, document.head.firstChild);
@@ -373,7 +380,7 @@ This example returns a string of HTML and inlines the critical CSS required, rig
 
 ```jsx
 import ReactDOMServer from 'react-dom/server';
-import { ServerStyleSheets } from '@material-ui/styles';
+import { ServerStyleSheets } from '@material-ui/core/styles';
 
 function render() {
   const sheets = new ServerStyleSheets();
@@ -395,14 +402,14 @@ function render() {
 }
 ```
 
-You can [follow the server side guide](/guides/server-rendering/) for a more detailed example, or read the [`ServerStyleSheets`](/styles/api/#serverstylesheets) API documentation.
+You can [follow the server side guide](/guides/server-rendering/) for a more detailed example, or read the [`ServerStyleSheets` API documentation](/styles/api/#serverstylesheets).
 
 ### Gatsby
 
-There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`.
+There is [an official Gatsby plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`.
 Refer to the plugin's page for setup and usage instructions.
 
-Refer to [this example project](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) for an up-to-date usage example.
+Refer to [this example Gatsby project](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) for an up-to-date usage example.
 
 ### Next.js
 
diff --git a/docs/src/pages/styles/api/api.md b/docs/src/pages/styles/api/api.md
index 6fe709420f8417..3a3bb75f53ecde 100644
--- a/docs/src/pages/styles/api/api.md
+++ b/docs/src/pages/styles/api/api.md
@@ -1,6 +1,6 @@
 # API
 
-<p class="description">The API reference of the @material-ui/styles package.</p>
+<p class="description">The API reference of @material-ui/core/styles.</p>
 
 ## `createGenerateClassName([options]) => class name generator`
 
@@ -21,7 +21,7 @@ A function which returns [a class name generator function](https://cssinjs.org/j
 
 ```jsx
 import React from 'react';
-import { StylesProvider, createGenerateClassName } from '@material-ui/styles';
+import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
 
 const generateClassName = createGenerateClassName({
   productionPrefix: 'c',
@@ -114,7 +114,7 @@ This is a class helper to handle server-side rendering. [You can follow this gui
 
 ```jsx
 import ReactDOMServer from 'react-dom/server';
-import { ServerStyleSheets } from '@material-ui/styles';
+import { ServerStyleSheets } from '@material-ui/core/styles';
 
 const sheets = new ServerStyleSheets();
 const html = ReactDOMServer.renderToString(sheets.collect(<App />));
@@ -222,7 +222,7 @@ It should preferably be used at **the root of your component tree**.
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { StylesProvider } from '@material-ui/styles';
+import { StylesProvider } from '@material-ui/core/styles';
 
 function App() {
   return (
@@ -250,7 +250,7 @@ It should preferably be used at **the root of your component tree**.
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 
 const theme = {};
 
diff --git a/docs/src/pages/styles/basics/StressTest.js b/docs/src/pages/styles/basics/StressTest.js
index b27e4f72451e20..0275bffdd2067e 100644
--- a/docs/src/pages/styles/basics/StressTest.js
+++ b/docs/src/pages/styles/basics/StressTest.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider, useTheme, makeStyles } from '@material-ui/styles';
+import { ThemeProvider, useTheme, makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: props => ({
diff --git a/docs/src/pages/styles/basics/StressTest.tsx b/docs/src/pages/styles/basics/StressTest.tsx
index 6a160154b48d95..d8042c94b99cd8 100644
--- a/docs/src/pages/styles/basics/StressTest.tsx
+++ b/docs/src/pages/styles/basics/StressTest.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, useTheme, makeStyles, createStyles } from '@material-ui/styles';
+import { ThemeProvider, useTheme, makeStyles, createStyles } from '@material-ui/core/styles';
 
 interface MyTheme {
   color: string;
diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 9498dd93c2f8f9..2e3d4a918b092a 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -1,54 +1,128 @@
-# @material-ui/core/styles
+# @material-ui/styles
 
 <p class="description">You can use Material-UI's styling solution in your app, whether or not you are using Material-UI components.</p>
 
 Material-UI aims to provide a strong foundation for building dynamic UIs.
-For the sake of simplicity, the styling solution used in Material-UI components is exported from `@material-ui/core/styles`.
+For the sake of simplicity, **we expose the styling solution used in Material-UI components** as the `@material-ui/styles` package.
 You can use it, but you don't have to, since Material-UI is also [interoperable with](/guides/interoperability/) all the other major styling solutions.
 
 ## Why use Material-UI's styling solution?
 
-[A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes the limitations of CSS, and inline styles,
-and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.):
+In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited.
+[A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations,
+and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
 
-- 💅 It has [the same advantages](https://www.styled-components.com/docs/basics#motivation) as styled-components.
+Material-UI's styling solution is inspired by many other styling libraries such as [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/master/packages/material-ui-benchmark/README.md#material-uistyles).
 - 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
 - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side.
-- 📦 No bundle size increase if used alongside Material-UI.
+- 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles); and no bundle size increase if used alongside Material-UI.
 
-## Getting started
+## Installation
 
-There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic:
+To install and save in your `package.json` dependencies, run:
 
-- Hook API
-- Higher-order component API
-- Styled-components API
+```sh
+// with npm
+npm install @material-ui/styles
 
-### Hook API
+// with yarn
+yarn add @material-ui/styles
+```
 
-Hooks can only be used with function components.
+## Getting started
 
-#### `@material-ui/core/styles/makeStyles`
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
 
-{{"demo": "pages/styles/basics/Hook.js", "defaultCodeOpen": true}}
+### Hook API
 
-### Higher-order component API
+```jsx
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Button from '@material-ui/core/Button';
 
-#### `@material-ui/core/styles/withStyles`
+const useStyles = makeStyles({
+  root: {
+    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+    border: 0,
+    borderRadius: 3,
+    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+    color: 'white',
+    height: 48,
+    padding: '0 30px',
+  },
+});
 
-This is helpful if you use class components, and can't use the hook API.
+export default function Hook() {
+  const classes = useStyles();
+  return <Button className={classes.root}>Hook</Button>;
+}
+```
 
-{{"demo": "pages/styles/basics/HigherOrderComponent.js", "defaultCodeOpen": true}}
+{{"demo": "pages/styles/basics/Hook.js"}}
 
 ### Styled components API
 
-#### `@material-ui/core/styles/styled`
-
 Note: this only applies to the calling syntax – style definitions still use a JSS object.
-You can also [change this to allow CSS](/styles/advanced/#string-templates), with some limitations.
+You can also [change this behavior](/styles/advanced/#string-templates), with some limitations.
+
+```jsx
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button from '@material-ui/core/Button';
+
+const MyButton = styled(Button)({
+  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+});
+
+export default function StyledComponents() {
+  return <MyButton>Styled Components</MyButton>;
+}
+```
+
+{{"demo": "pages/styles/basics/StyledComponents.js"}}
+
+### Higher-order component API
+
+```jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/styles';
+import Button from '@material-ui/core/Button';
 
-{{"demo": "pages/styles/basics/StyledComponents.js", "defaultCodeOpen": true}}
+const styles = {
+  root: {
+    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+    border: 0,
+    borderRadius: 3,
+    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+    color: 'white',
+    height: 48,
+    padding: '0 30px',
+  },
+};
+
+function HigherOrderComponent(props) {
+  const { classes } = props;
+  return <Button className={classes.root}>Higher-order component</Button>;
+}
+
+HigherOrderComponent.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(HigherOrderComponent);
+```
+
+{{"demo": "pages/styles/basics/HigherOrderComponent.js"}}
 
 ## Nesting selectors
 
@@ -76,10 +150,7 @@ const useStyles = makeStyles({
 
 You can pass a function to `makeStyles` ("interpolation")
 in order to adapt the generated value based on the component's props.
-The function can be provided at the style rule level, or at the CSS property level.
-
-The following example uses the Hook API, but it works the same way with the other APIs
-(see below for examples).
+The function can be provided at the style rule level, or at the CSS property level:
 
 ```jsx
 const useStyles = makeStyles({

From eabaab944bf754c5f8d89cda9258f12853648dd3 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sat, 28 Sep 2019 18:55:58 +0100
Subject: [PATCH 07/12] Fix misc imports

---
 docs/src/modules/components/AppTheme.js                  | 3 +--
 docs/src/modules/components/DemoSandboxed.js             | 3 +--
 docs/src/modules/components/ThemeContext.js              | 7 +++++--
 docs/src/pages/components/box/box.md                     | 2 +-
 docs/src/pages/components/buttons/CustomizedButtons.js   | 3 +--
 docs/src/pages/components/buttons/CustomizedButtons.tsx  | 2 +-
 .../src/pages/components/text-fields/CustomizedInputs.js | 9 +++++++--
 .../pages/components/text-fields/CustomizedInputs.tsx    | 2 +-
 docs/src/pages/components/use-media-query/ServerSide.js  | 2 +-
 docs/src/pages/components/use-media-query/ThemeHelper.js | 3 +--
 .../src/pages/components/use-media-query/ThemeHelper.tsx | 3 +--
 docs/src/pages/components/use-media-query/UseWidth.js    | 3 +--
 .../pages/components/use-media-query/use-media-query.md  | 2 +-
 docs/src/pages/css-in-js/basics/AdaptingHook.js          | 2 +-
 docs/src/pages/css-in-js/basics/AdaptingHook.tsx         | 2 +-
 .../pages/css-in-js/basics/AdaptingStyledComponents.js   | 2 +-
 .../pages/css-in-js/basics/AdaptingStyledComponents.tsx  | 2 +-
 .../customization/components/DynamicThemeNesting.js      | 3 +--
 docs/src/pages/customization/globals/DefaultProps.js     | 3 +--
 docs/src/pages/customization/globals/GlobalCss.js        | 3 +--
 docs/src/pages/customization/palette/DarkTheme.js        | 3 +--
 docs/src/pages/customization/palette/DarkTheme.tsx       | 3 +--
 docs/src/pages/customization/theming/CustomStyles.js     | 3 +--
 docs/src/pages/customization/theming/CustomStyles.tsx    | 2 +-
 docs/src/pages/customization/theming/ThemeNesting.js     | 3 +--
 docs/src/pages/customization/theming/ThemeNesting.tsx    | 3 +--
 .../pages/customization/theming/ThemeNestingExtend.js    | 3 +--
 .../pages/customization/theming/ThemeNestingExtend.tsx   | 3 +--
 docs/src/pages/customization/typography/FontSizeTheme.js | 3 +--
 .../src/pages/customization/typography/FontSizeTheme.tsx | 3 +--
 .../customization/typography/ResponsiveFontSizes.js      | 3 +--
 .../customization/typography/ResponsiveFontSizes.tsx     | 3 +--
 .../pages/customization/typography/TypographyVariants.js | 3 +--
 .../customization/typography/TypographyVariants.tsx      | 3 +--
 .../pages/guides/interoperability/interoperability.md    | 2 +-
 docs/src/pages/guides/right-to-left/Direction.js         | 3 +--
 docs/src/pages/guides/right-to-left/Direction.tsx        | 3 +--
 docs/src/pages/guides/right-to-left/right-to-left.md     | 2 +-
 .../pages/guides/server-rendering/server-rendering.md    | 4 ++--
 .../pages/premium-themes/onepirate/modules/withRoot.js   | 2 +-
 docs/src/pages/premium-themes/paperbase/Paperbase.js     | 3 +--
 docs/src/pages/premium-themes/paperbase/Paperbase.tsx    | 9 +++++++--
 docs/src/pages/styles/advanced/advanced.md               | 2 +-
 docs/src/pages/styles/basics/AdaptingHOC.js              | 2 +-
 docs/src/pages/styles/basics/AdaptingHOC.tsx             | 2 +-
 docs/src/pages/styles/basics/AdaptingHook.js             | 2 +-
 docs/src/pages/styles/basics/AdaptingHook.tsx            | 2 +-
 docs/src/pages/styles/basics/AdaptingStyledComponents.js | 2 +-
 .../src/pages/styles/basics/AdaptingStyledComponents.tsx | 2 +-
 docs/src/pages/styles/basics/HigherOrderComponent.js     | 2 +-
 docs/src/pages/styles/basics/HigherOrderComponent.tsx    | 2 +-
 docs/src/pages/styles/basics/NestedStylesHook.js         | 2 +-
 docs/src/pages/styles/basics/NestedStylesHook.tsx        | 2 +-
 docs/src/pages/styles/typescript/typescript.md           | 2 +-
 docs/src/pages/system/basics/JSS.js                      | 2 +-
 docs/src/pages/system/basics/JSS.tsx                     | 2 +-
 56 files changed, 73 insertions(+), 85 deletions(-)

diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js
index 3641c5ba43746b..504d4837bf2597 100644
--- a/docs/src/modules/components/AppTheme.js
+++ b/docs/src/modules/components/AppTheme.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'docs/src/modules/components/Head';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 const defaultTheme = createMuiTheme();
 
diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
index 4fa43384872c93..d50533627bb5ed 100644
--- a/docs/src/modules/components/DemoSandboxed.js
+++ b/docs/src/modules/components/DemoSandboxed.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { create } from 'jss';
-import { withStyles, useTheme } from '@material-ui/core/styles';
-import { jssPreset, StylesProvider } from '@material-ui/styles';
+import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/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/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
index b3573ad79b72ef..383a47d90482db 100644
--- a/docs/src/modules/components/ThemeContext.js
+++ b/docs/src/modules/components/ThemeContext.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles';
-import { createMuiTheme, darken } from '@material-ui/core/styles';
+import {
+  ThemeProvider as MuiThemeProvider,
+  createMuiTheme,
+  darken,
+} from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { blue, pink } from '@material-ui/core/colors';
 import { getCookie } from 'docs/src/modules/utils/helpers';
diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md
index a55127caaa7b78..a2f92061ea4bd8 100644
--- a/docs/src/pages/components/box/box.md
+++ b/docs/src/pages/components/box/box.md
@@ -7,7 +7,7 @@ title: Box React component
 <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()`](/styles/api/#styled-style-function-component) function of `@material-ui/styles`.
+It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/core/styles`.
 
 ## Example
 
diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js
index 7c32fbad7b23f1..15dcf7af45893b 100644
--- a/docs/src/pages/components/buttons/CustomizedButtons.js
+++ b/docs/src/pages/components/buttons/CustomizedButtons.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme, withStyles, makeStyles } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import { green, purple } from '@material-ui/core/colors';
 
diff --git a/docs/src/pages/components/buttons/CustomizedButtons.tsx b/docs/src/pages/components/buttons/CustomizedButtons.tsx
index be9e473333ea12..7a5289b6aed60b 100644
--- a/docs/src/pages/components/buttons/CustomizedButtons.tsx
+++ b/docs/src/pages/components/buttons/CustomizedButtons.tsx
@@ -5,8 +5,8 @@ import {
   withStyles,
   makeStyles,
   Theme,
+  ThemeProvider,
 } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import { green, purple } from '@material-ui/core/colors';
 
diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js
index a2c2c5d906e1f7..fc02df94c5395c 100644
--- a/docs/src/pages/components/text-fields/CustomizedInputs.js
+++ b/docs/src/pages/components/text-fields/CustomizedInputs.js
@@ -1,6 +1,11 @@
 import React from 'react';
-import { fade, withStyles, makeStyles, createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import {
+  fade,
+  ThemeProvider,
+  withStyles,
+  makeStyles,
+  createMuiTheme,
+} from '@material-ui/core/styles';
 import InputBase from '@material-ui/core/InputBase';
 import InputLabel from '@material-ui/core/InputLabel';
 import TextField from '@material-ui/core/TextField';
diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.tsx b/docs/src/pages/components/text-fields/CustomizedInputs.tsx
index f91b618d10a949..d95f091c0d21ba 100644
--- a/docs/src/pages/components/text-fields/CustomizedInputs.tsx
+++ b/docs/src/pages/components/text-fields/CustomizedInputs.tsx
@@ -3,11 +3,11 @@ import {
   createStyles,
   fade,
   Theme,
+  ThemeProvider,
   withStyles,
   makeStyles,
   createMuiTheme,
 } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
 import InputBase from '@material-ui/core/InputBase';
 import InputLabel from '@material-ui/core/InputLabel';
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
diff --git a/docs/src/pages/components/use-media-query/ServerSide.js b/docs/src/pages/components/use-media-query/ServerSide.js
index a9dd09110b744b..a618604e769102 100644
--- a/docs/src/pages/components/use-media-query/ServerSide.js
+++ b/docs/src/pages/components/use-media-query/ServerSide.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import mediaQuery from 'css-mediaquery';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function MyComponent() {
diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.js b/docs/src/pages/components/use-media-query/ThemeHelper.js
index a877921af6ac84..2c538a9005be3c 100644
--- a/docs/src/pages/components/use-media-query/ThemeHelper.js
+++ b/docs/src/pages/components/use-media-query/ThemeHelper.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme, useTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function MyComponent() {
diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.tsx b/docs/src/pages/components/use-media-query/ThemeHelper.tsx
index a877921af6ac84..2c538a9005be3c 100644
--- a/docs/src/pages/components/use-media-query/ThemeHelper.tsx
+++ b/docs/src/pages/components/use-media-query/ThemeHelper.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme, useTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function MyComponent() {
diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js
index 4de165a4085e20..ce42a8c65cd478 100644
--- a/docs/src/pages/components/use-media-query/UseWidth.js
+++ b/docs/src/pages/components/use-media-query/UseWidth.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import { ThemeProvider, useTheme } from '@material-ui/styles';
+import { ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { createMuiTheme } from '@material-ui/core/styles';
 
 /**
  * Be careful using this hook. It only works because the number of
diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md
index 2d9554af9726ad..3fedc407946241 100644
--- a/docs/src/pages/components/use-media-query/use-media-query.md
+++ b/docs/src/pages/components/use-media-query/use-media-query.md
@@ -114,7 +114,7 @@ For instance:
 import ReactDOMServer from 'react-dom/server';
 import parser from 'ua-parser-js';
 import mediaQuery from 'css-mediaquery';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 
 function handleRender(req, res) {
   const deviceType = parser(req.headers['user-agent']).device.type || 'desktop';
diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.js b/docs/src/pages/css-in-js/basics/AdaptingHook.js
index df9a59b590a7a7..f79872145bf7ad 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingHook.js
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.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';
 
 const useStyles = makeStyles({
diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
index a74ef74fc57f24..94a5dc781f582f 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 
diff --git a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js
index caa43738563562..dba62e99eea47b 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js
+++ b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
diff --git a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
index fdfb2f513a47b3..8d3034065ba050 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
+++ b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 
diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.js b/docs/src/pages/customization/components/DynamicThemeNesting.js
index 6ca1afa0870104..bb92c2dd87cdaf 100644
--- a/docs/src/pages/customization/components/DynamicThemeNesting.js
+++ b/docs/src/pages/customization/components/DynamicThemeNesting.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import { blue } from '@material-ui/core/colors';
 import Switch from '@material-ui/core/Switch';
diff --git a/docs/src/pages/customization/globals/DefaultProps.js b/docs/src/pages/customization/globals/DefaultProps.js
index 40498cc8083102..eef23c5cb2d498 100644
--- a/docs/src/pages/customization/globals/DefaultProps.js
+++ b/docs/src/pages/customization/globals/DefaultProps.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/globals/GlobalCss.js b/docs/src/pages/customization/globals/GlobalCss.js
index 3fc330d97b4fff..68ecc0ba197fb7 100644
--- a/docs/src/pages/customization/globals/GlobalCss.js
+++ b/docs/src/pages/customization/globals/GlobalCss.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 1a4bd623a5b35b..474d186af4cf1b 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { useTheme, createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 function WithTheme() {
   const theme = useTheme();
diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx
index 1a4bd623a5b35b..474d186af4cf1b 100644
--- a/docs/src/pages/customization/palette/DarkTheme.tsx
+++ b/docs/src/pages/customization/palette/DarkTheme.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { useTheme, createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 function WithTheme() {
   const theme = useTheme();
diff --git a/docs/src/pages/customization/theming/CustomStyles.js b/docs/src/pages/customization/theming/CustomStyles.js
index 4e2aedd2f4c85e..e46e6287a4b477 100644
--- a/docs/src/pages/customization/theming/CustomStyles.js
+++ b/docs/src/pages/customization/theming/CustomStyles.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
-import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
 import { orange } from '@material-ui/core/colors';
 
 const useStyles = makeStyles(theme => ({
diff --git a/docs/src/pages/customization/theming/CustomStyles.tsx b/docs/src/pages/customization/theming/CustomStyles.tsx
index be3ca41baf3afb..26f65e361fc0c8 100644
--- a/docs/src/pages/customization/theming/CustomStyles.tsx
+++ b/docs/src/pages/customization/theming/CustomStyles.tsx
@@ -5,8 +5,8 @@ import {
   makeStyles,
   createStyles,
   Theme as AugmentedTheme,
+  ThemeProvider,
 } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
 import { orange } from '@material-ui/core/colors';
 
 declare module '@material-ui/core/styles/createMuiTheme' {
diff --git a/docs/src/pages/customization/theming/ThemeNesting.js b/docs/src/pages/customization/theming/ThemeNesting.js
index 406862496f70bd..a9935ab2471d48 100644
--- a/docs/src/pages/customization/theming/ThemeNesting.js
+++ b/docs/src/pages/customization/theming/ThemeNesting.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import { green, orange } from '@material-ui/core/colors';
 
diff --git a/docs/src/pages/customization/theming/ThemeNesting.tsx b/docs/src/pages/customization/theming/ThemeNesting.tsx
index 406862496f70bd..a9935ab2471d48 100644
--- a/docs/src/pages/customization/theming/ThemeNesting.tsx
+++ b/docs/src/pages/customization/theming/ThemeNesting.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import { green, orange } from '@material-ui/core/colors';
 
diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.js b/docs/src/pages/customization/theming/ThemeNestingExtend.js
index 0ba84915752f24..5c21a916083108 100644
--- a/docs/src/pages/customization/theming/ThemeNestingExtend.js
+++ b/docs/src/pages/customization/theming/ThemeNestingExtend.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import { green, orange } from '@material-ui/core/colors';
 
diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx
index bbc65fb8eabb84..013944efb4fe4e 100644
--- a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx
+++ b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme, Theme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, Theme, ThemeProvider } from '@material-ui/core/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import { green, orange } from '@material-ui/core/colors';
 
diff --git a/docs/src/pages/customization/typography/FontSizeTheme.js b/docs/src/pages/customization/typography/FontSizeTheme.js
index 1c5418307ff769..2ef9540b5e940c 100644
--- a/docs/src/pages/customization/typography/FontSizeTheme.js
+++ b/docs/src/pages/customization/typography/FontSizeTheme.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
 const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/typography/FontSizeTheme.tsx b/docs/src/pages/customization/typography/FontSizeTheme.tsx
index 1c5418307ff769..2ef9540b5e940c 100644
--- a/docs/src/pages/customization/typography/FontSizeTheme.tsx
+++ b/docs/src/pages/customization/typography/FontSizeTheme.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
 const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.js b/docs/src/pages/customization/typography/ResponsiveFontSizes.js
index 4eec9292a68172..23d8338fbfae3e 100644
--- a/docs/src/pages/customization/typography/ResponsiveFontSizes.js
+++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
 let theme = createMuiTheme();
diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx
index 4eec9292a68172..23d8338fbfae3e 100644
--- a/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx
+++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
 let theme = createMuiTheme();
diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js
index dddff665fa6a1b..af5ab349fa90fe 100644
--- a/docs/src/pages/customization/typography/TypographyVariants.js
+++ b/docs/src/pages/customization/typography/TypographyVariants.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
diff --git a/docs/src/pages/customization/typography/TypographyVariants.tsx b/docs/src/pages/customization/typography/TypographyVariants.tsx
index dddff665fa6a1b..af5ab349fa90fe 100644
--- a/docs/src/pages/customization/typography/TypographyVariants.tsx
+++ b/docs/src/pages/customization/typography/TypographyVariants.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index bd6a22344f8836..25368a31889b22 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -128,7 +128,7 @@ export default function StyledComponents() {
 The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo:
 
 ```jsx
-import { StylesProvider } from '@material-ui/styles';
+import { StylesProvider } from '@material-ui/core/styles';
 
 <StylesProvider injectFirst>
   {/* Your component tree.
diff --git a/docs/src/pages/guides/right-to-left/Direction.js b/docs/src/pages/guides/right-to-left/Direction.js
index 758b136c29e3a0..484386e1cc612a 100644
--- a/docs/src/pages/guides/right-to-left/Direction.js
+++ b/docs/src/pages/guides/right-to-left/Direction.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
 const theme = createMuiTheme({
diff --git a/docs/src/pages/guides/right-to-left/Direction.tsx b/docs/src/pages/guides/right-to-left/Direction.tsx
index 758b136c29e3a0..484386e1cc612a 100644
--- a/docs/src/pages/guides/right-to-left/Direction.tsx
+++ b/docs/src/pages/guides/right-to-left/Direction.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
 const theme = createMuiTheme({
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 ba560c9c92674e..ff2641b5f956bf 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
@@ -37,7 +37,7 @@ The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
 ```jsx
 import { create } from 'jss';
 import rtl from 'jss-rtl';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 
 // Configure JSS
 const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md
index 4c12498126e70d..839abf5376b9bb 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering.md
@@ -98,7 +98,7 @@ We will see how this is passed along in the `renderFullPage` function.
 import express from 'express';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles';
+import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles';
 import App from './App';
 import theme from './theme';
 
@@ -163,7 +163,7 @@ Let's take a look at the client file:
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 import App from './App';
 import theme from './theme';
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
index 73a4bf0b3207e2..314f4d2c3b6ca1 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import theme from './theme';
 
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js
index 46426754f6ef80..d70b8a4163f049 100644
--- a/docs/src/pages/premium-themes/paperbase/Paperbase.js
+++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { createMuiTheme, withStyles } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme, ThemeProvider, withStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Hidden from '@material-ui/core/Hidden';
 import Typography from '@material-ui/core/Typography';
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx
index 01b999921e5aac..e165251f021189 100644
--- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx
+++ b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
-import { createMuiTheme, createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import {
+  createMuiTheme,
+  createStyles,
+  ThemeProvider,
+  withStyles,
+  WithStyles,
+} from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Hidden from '@material-ui/core/Hidden';
 import Typography from '@material-ui/core/Typography';
diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
index 3809e983c6f560..a37fca73d401cd 100644
--- a/docs/src/pages/styles/advanced/advanced.md
+++ b/docs/src/pages/styles/advanced/advanced.md
@@ -423,7 +423,7 @@ The class names are generated by [the class name generator](/styles/api/#createg
 
 ### Default
 
-By default, the class names generated by `@material-ui/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
+By default, the class names generated by `@material-ui/core/styles` are **non-deterministic**; you can't rely on them to stay the same. Let's take the following style as an example:
 
 ```js
 const useStyles = makeStyles({
diff --git a/docs/src/pages/styles/basics/AdaptingHOC.js b/docs/src/pages/styles/basics/AdaptingHOC.js
index c0dda8f9547a81..5bf148c16196fc 100644
--- a/docs/src/pages/styles/basics/AdaptingHOC.js
+++ b/docs/src/pages/styles/basics/AdaptingHOC.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
diff --git a/docs/src/pages/styles/basics/AdaptingHOC.tsx b/docs/src/pages/styles/basics/AdaptingHOC.tsx
index 4b98a3372e1fff..6ac9e5a5be2fff 100644
--- a/docs/src/pages/styles/basics/AdaptingHOC.tsx
+++ b/docs/src/pages/styles/basics/AdaptingHOC.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withStyles, createStyles, WithStyles } from '@material-ui/styles';
+import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 
diff --git a/docs/src/pages/styles/basics/AdaptingHook.js b/docs/src/pages/styles/basics/AdaptingHook.js
index df9a59b590a7a7..f79872145bf7ad 100644
--- a/docs/src/pages/styles/basics/AdaptingHook.js
+++ b/docs/src/pages/styles/basics/AdaptingHook.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';
 
 const useStyles = makeStyles({
diff --git a/docs/src/pages/styles/basics/AdaptingHook.tsx b/docs/src/pages/styles/basics/AdaptingHook.tsx
index a74ef74fc57f24..94a5dc781f582f 100644
--- a/docs/src/pages/styles/basics/AdaptingHook.tsx
+++ b/docs/src/pages/styles/basics/AdaptingHook.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 
diff --git a/docs/src/pages/styles/basics/AdaptingStyledComponents.js b/docs/src/pages/styles/basics/AdaptingStyledComponents.js
index caa43738563562..dba62e99eea47b 100644
--- a/docs/src/pages/styles/basics/AdaptingStyledComponents.js
+++ b/docs/src/pages/styles/basics/AdaptingStyledComponents.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
diff --git a/docs/src/pages/styles/basics/AdaptingStyledComponents.tsx b/docs/src/pages/styles/basics/AdaptingStyledComponents.tsx
index fdfb2f513a47b3..8d3034065ba050 100644
--- a/docs/src/pages/styles/basics/AdaptingStyledComponents.tsx
+++ b/docs/src/pages/styles/basics/AdaptingStyledComponents.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 
diff --git a/docs/src/pages/styles/basics/HigherOrderComponent.js b/docs/src/pages/styles/basics/HigherOrderComponent.js
index c43046b4795acd..9a41e82560afce 100644
--- a/docs/src/pages/styles/basics/HigherOrderComponent.js
+++ b/docs/src/pages/styles/basics/HigherOrderComponent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
diff --git a/docs/src/pages/styles/basics/HigherOrderComponent.tsx b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
index 611066d05ba9cb..1764db84d2a47f 100644
--- a/docs/src/pages/styles/basics/HigherOrderComponent.tsx
+++ b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withStyles, WithStyles, createStyles } from '@material-ui/styles';
+import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = createStyles({
diff --git a/docs/src/pages/styles/basics/NestedStylesHook.js b/docs/src/pages/styles/basics/NestedStylesHook.js
index f7fa032151e8c5..b2dbd87905ad01 100644
--- a/docs/src/pages/styles/basics/NestedStylesHook.js
+++ b/docs/src/pages/styles/basics/NestedStylesHook.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';
 
 const useStyles = makeStyles({
diff --git a/docs/src/pages/styles/basics/NestedStylesHook.tsx b/docs/src/pages/styles/basics/NestedStylesHook.tsx
index f7fa032151e8c5..b2dbd87905ad01 100644
--- a/docs/src/pages/styles/basics/NestedStylesHook.tsx
+++ b/docs/src/pages/styles/basics/NestedStylesHook.tsx
@@ -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';
 
 const useStyles = makeStyles({
diff --git a/docs/src/pages/styles/typescript/typescript.md b/docs/src/pages/styles/typescript/typescript.md
index 90e870c8ad1bd0..25eed9bdc47b00 100644
--- a/docs/src/pages/styles/typescript/typescript.md
+++ b/docs/src/pages/styles/typescript/typescript.md
@@ -5,7 +5,7 @@
 You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`.
 
 ```typescript
-declare module '@material-ui/styles' {
+declare module '@material-ui/core/styles' {
   interface DefaultTheme {
     myProperty: string;
   }
diff --git a/docs/src/pages/system/basics/JSS.js b/docs/src/pages/system/basics/JSS.js
index 42b0194b5c54f5..4ae4c97bd7a304 100644
--- a/docs/src/pages/system/basics/JSS.js
+++ b/docs/src/pages/system/basics/JSS.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import { compose, spacing, palette } from '@material-ui/system';
 
 const Box = styled('div')(
diff --git a/docs/src/pages/system/basics/JSS.tsx b/docs/src/pages/system/basics/JSS.tsx
index 42b0194b5c54f5..4ae4c97bd7a304 100644
--- a/docs/src/pages/system/basics/JSS.tsx
+++ b/docs/src/pages/system/basics/JSS.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import { compose, spacing, palette } from '@material-ui/system';
 
 const Box = styled('div')(

From 346f2fce4fbca4ffbc28fdfb8c6366833e2d7076 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sat, 28 Sep 2019 20:17:58 +0100
Subject: [PATCH 08/12] Roll out the barrel

---
 packages/material-ui/src/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 72e60af7ab30be..684bcadcad8502 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -15,6 +15,11 @@ export {
   useTheme,
   withStyles,
   withTheme,
+  ThemeProvider,
+  StylesProvider,
+  jssPreset,
+  ServerStyleSheets,
+  createGenerateClassName,
 } from './styles';
 
 export { default as AppBar } from './AppBar';

From 29549edab184d8933e342074c54731019f1f88c6 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 28 Sep 2019 23:31:54 +0200
Subject: [PATCH 09/12] Rebase

---
 docs/src/modules/components/AppTheme.js                    | 7 ++-----
 docs/src/pages/styles/advanced/WithTheme.js                | 2 +-
 docs/src/pages/styles/advanced/WithTheme.tsx               | 2 +-
 docs/src/pages/styles/basics/AdaptingHOC.tsx               | 4 +++-
 docs/src/pages/styles/basics/HigherOrderComponent.js       | 6 +++---
 docs/src/pages/styles/basics/HigherOrderComponent.tsx      | 4 ++--
 docs/src/pages/styles/basics/Hook.js                       | 2 +-
 docs/src/pages/styles/basics/Hook.tsx                      | 2 +-
 docs/src/pages/styles/basics/StyledComponents.js           | 2 +-
 docs/src/pages/styles/basics/StyledComponents.tsx          | 2 +-
 packages/material-ui-styles/src/withStyles/withStyles.d.ts | 5 +++--
 packages/material-ui/src/index.d.ts                        | 2 ++
 packages/material-ui/src/index.js                          | 6 +-----
 packages/material-ui/src/styles/MuiThemeProvider.d.ts      | 3 ---
 packages/material-ui/src/styles/MuiThemeProvider.js        | 6 ------
 packages/material-ui/src/styles/index.d.ts                 | 3 ++-
 packages/material-ui/src/styles/index.js                   | 2 ++
 packages/material-ui/src/styles/withStyles.d.ts            | 2 ++
 18 files changed, 28 insertions(+), 34 deletions(-)
 delete mode 100644 packages/material-ui/src/styles/MuiThemeProvider.d.ts
 delete mode 100644 packages/material-ui/src/styles/MuiThemeProvider.js

diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js
index 504d4837bf2597..f99722aaffdb00 100644
--- a/docs/src/modules/components/AppTheme.js
+++ b/docs/src/modules/components/AppTheme.js
@@ -1,20 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'docs/src/modules/components/Head';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
-
-const defaultTheme = createMuiTheme();
 
 export default function AppTheme(props) {
   const { children } = props;
 
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <React.Fragment>
       <Head>
         <meta name="robots" content="noindex,nofollow" />
       </Head>
       {children}
-    </ThemeProvider>
+    </React.Fragment>
   );
 }
 
diff --git a/docs/src/pages/styles/advanced/WithTheme.js b/docs/src/pages/styles/advanced/WithTheme.js
index 0e00189e334b06..892c02c7fbfa5c 100644
--- a/docs/src/pages/styles/advanced/WithTheme.js
+++ b/docs/src/pages/styles/advanced/WithTheme.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider, withTheme } from '@material-ui/core/styles';
+import { ThemeProvider, withTheme } from '@material-ui/styles';
 
 function DeepChildRaw(props) {
   return <span>{`spacing ${props.theme.spacing}`}</span>;
diff --git a/docs/src/pages/styles/advanced/WithTheme.tsx b/docs/src/pages/styles/advanced/WithTheme.tsx
index ccf81f9eac86e3..04e9cd9b5379a6 100644
--- a/docs/src/pages/styles/advanced/WithTheme.tsx
+++ b/docs/src/pages/styles/advanced/WithTheme.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, WithTheme as WithThemeProps, withTheme } from '@material-ui/core/styles';
+import { ThemeProvider, WithTheme as WithThemeProps, withTheme } from '@material-ui/styles';
 
 interface Theme {
   spacing: string;
diff --git a/docs/src/pages/styles/basics/AdaptingHOC.tsx b/docs/src/pages/styles/basics/AdaptingHOC.tsx
index 6ac9e5a5be2fff..2869782f8d18d1 100644
--- a/docs/src/pages/styles/basics/AdaptingHOC.tsx
+++ b/docs/src/pages/styles/basics/AdaptingHOC.tsx
@@ -26,7 +26,9 @@ interface MyButtonRawProps {
   color: 'red' | 'blue';
 }
 
-function MyButtonRaw(props: WithStyles<typeof styles> & Omit<ButtonProps, keyof MyButtonRawProps>) {
+function MyButtonRaw(
+  props: WithStyles<typeof styles> & Omit<ButtonProps, keyof MyButtonRawProps> & MyButtonRawProps,
+) {
   const { classes, color, ...other } = props;
   return <Button className={classes.root} {...other} />;
 }
diff --git a/docs/src/pages/styles/basics/HigherOrderComponent.js b/docs/src/pages/styles/basics/HigherOrderComponent.js
index 9a41e82560afce..58b606df72779f 100644
--- a/docs/src/pages/styles/basics/HigherOrderComponent.js
+++ b/docs/src/pages/styles/basics/HigherOrderComponent.js
@@ -15,13 +15,13 @@ const styles = {
   },
 };
 
-function HocComponent(props) {
+function HigherOrderComponent(props) {
   const { classes } = props;
   return <Button className={classes.root}>Styled with HOC API</Button>;
 }
 
-HocComponent.propTypes = {
+HigherOrderComponent.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(HocComponent);
+export default withStyles(styles)(HigherOrderComponent);
diff --git a/docs/src/pages/styles/basics/HigherOrderComponent.tsx b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
index 1764db84d2a47f..155f15839e347a 100644
--- a/docs/src/pages/styles/basics/HigherOrderComponent.tsx
+++ b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
@@ -14,9 +14,9 @@ const styles = createStyles({
   },
 });
 
-function HocComponent(props: WithStyles<typeof styles>) {
+function HigherOrderComponent(props: WithStyles<typeof styles>) {
   const { classes } = props;
   return <Button className={classes.root}>Styled with HOC API</Button>;
 }
 
-export default withStyles(styles)(HocComponent);
+export default withStyles(styles)(HigherOrderComponent);
diff --git a/docs/src/pages/styles/basics/Hook.js b/docs/src/pages/styles/basics/Hook.js
index 19eb028136d0af..19107e6a36710c 100644
--- a/docs/src/pages/styles/basics/Hook.js
+++ b/docs/src/pages/styles/basics/Hook.js
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function HookFunctionComponent() {
+export default function Hook() {
   const classes = useStyles();
   return <Button className={classes.root}>Styled with Hook API</Button>;
 }
diff --git a/docs/src/pages/styles/basics/Hook.tsx b/docs/src/pages/styles/basics/Hook.tsx
index 19eb028136d0af..19107e6a36710c 100644
--- a/docs/src/pages/styles/basics/Hook.tsx
+++ b/docs/src/pages/styles/basics/Hook.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function HookFunctionComponent() {
+export default function Hook() {
   const classes = useStyles();
   return <Button className={classes.root}>Styled with Hook API</Button>;
 }
diff --git a/docs/src/pages/styles/basics/StyledComponents.js b/docs/src/pages/styles/basics/StyledComponents.js
index 2b4e5e334763be..0a915dd53966d7 100644
--- a/docs/src/pages/styles/basics/StyledComponents.js
+++ b/docs/src/pages/styles/basics/StyledComponents.js
@@ -12,6 +12,6 @@ const MyButton = styled(Button)({
   padding: '0 30px',
 });
 
-export default function ScComponent() {
+export default function StyledComponents() {
   return <MyButton>Styled with styled-components API</MyButton>;
 }
diff --git a/docs/src/pages/styles/basics/StyledComponents.tsx b/docs/src/pages/styles/basics/StyledComponents.tsx
index 2b4e5e334763be..0a915dd53966d7 100644
--- a/docs/src/pages/styles/basics/StyledComponents.tsx
+++ b/docs/src/pages/styles/basics/StyledComponents.tsx
@@ -12,6 +12,6 @@ const MyButton = styled(Button)({
   padding: '0 30px',
 });
 
-export default function ScComponent() {
+export default function StyledComponents() {
   return <MyButton>Styled with styled-components API</MyButton>;
 }
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 65de7fbd27f420..1df7d1cfbf74fe 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -81,13 +81,14 @@ export type ClassKeyOfStyles<StylesOrClassKey> = StylesOrClassKey extends string
   : never;
 
 /**
- * infers the type of the theme used in the styles
+ * infers the type of the props used in the styles
  */
 export type PropsOfStyles<StylesType> = StylesType extends Styles<any, infer Props>
   ? CoerceEmptyInterface<Props>
   : {};
+
 /**
- * infers the type of the props used in the styles
+ * infers the type of the theme used in the styles
  */
 export type ThemeOfStyles<StylesType> = StylesType extends Styles<infer Theme, any> ? Theme : {};
 
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index 21f7ced7d1d663..dd459c9d472919 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -6,6 +6,8 @@ export { StyledComponentProps };
 /**
  * @deprecated
  * Import from `@material-ui/types` instead
+ *
+ * TODO: to remove in v5
  */
 export { Omit };
 
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 684bcadcad8502..5405d324e6ea8b 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -12,14 +12,10 @@ export {
   ServerStyleSheets,
   styled,
   StylesProvider,
+  ThemeProvider,
   useTheme,
   withStyles,
   withTheme,
-  ThemeProvider,
-  StylesProvider,
-  jssPreset,
-  ServerStyleSheets,
-  createGenerateClassName,
 } from './styles';
 
 export { default as AppBar } from './AppBar';
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 e42dcbad97a4db..00000000000000
--- a/packages/material-ui/src/styles/MuiThemeProvider.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ThemeProvider } from '@material-ui/styles';
-
-export default ThemeProvider;
diff --git a/packages/material-ui/src/styles/MuiThemeProvider.js b/packages/material-ui/src/styles/MuiThemeProvider.js
deleted file mode 100644
index 719dad3e83b94e..00000000000000
--- a/packages/material-ui/src/styles/MuiThemeProvider.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ThemeProvider } from '@material-ui/styles';
-
-/**
- * @ignore - do not document.
- */
-export default ThemeProvider;
diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts
index fe17fcaf7c1da7..74d23342c2d23d 100644
--- a/packages/material-ui/src/styles/index.d.ts
+++ b/packages/material-ui/src/styles/index.d.ts
@@ -8,7 +8,6 @@ export {
 export { default as createStyles } from './createStyles';
 export { TypographyStyle } from './createTypography';
 export { default as makeStyles } from './makeStyles';
-export { default as MuiThemeProvider } from './MuiThemeProvider';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
 export { ComponentsPropsList } from './props';
 export * from './transitions';
@@ -27,4 +26,6 @@ export {
   jssPreset,
   ServerStyleSheets,
   StylesProvider,
+  ThemeProvider as MuiThemeProvider,
+  ThemeProvider,
 } from '@material-ui/styles';
diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js
index 4b68360afe3ad2..42e1661a5086be 100644
--- a/packages/material-ui/src/styles/index.js
+++ b/packages/material-ui/src/styles/index.js
@@ -14,4 +14,6 @@ export {
   jssPreset,
   ServerStyleSheets,
   StylesProvider,
+  ThemeProvider as MuiThemeProvider,
+  ThemeProvider,
 } from '@material-ui/styles';
diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index 8027dc52404b27..81784bd62a372e 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -27,6 +27,8 @@ export {
 /**
  * Adapter for `StyleRules` from `@material-ui/styles` for backwards compatibility.
  * Order of generic arguments is just reversed.
+ *
+ * TODO: to normalize in v5
  */
 export type StyleRules<
   ClassKey extends string = string,

From 3b111c9d517e69b0b8efcc43e0e8b0b22cf072f0 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 1 Oct 2019 15:55:53 +0200
Subject: [PATCH 10/12] double down on ThemeProvider

---
 docs/src/pages/customization/color/color.md            |  2 +-
 .../customization/components/GlobalThemeOverride.js    |  6 +++---
 .../customization/components/GlobalThemeOverride.tsx   |  6 +++---
 .../pages/customization/components/ThemeVariables.js   |  6 +++---
 .../pages/customization/components/ThemeVariables.tsx  |  6 +++---
 docs/src/pages/guides/testing/testing.md               |  6 +++---
 docs/src/pages/styles/basics/basics.md                 |  6 +++---
 examples/cdn/index.html                                |  6 +++---
 .../src/v4.0.0/optimal-imports.test/actual.js          |  1 -
 .../src/v4.0.0/optimal-imports.test/expected.js        |  2 +-
 packages/material-ui/src/Collapse/Collapse.test.js     |  6 +++---
 packages/material-ui/src/Drawer/Drawer.test.js         | 10 +++++-----
 .../src/OutlinedInput/NotchedOutline.test.js           | 10 +++++-----
 packages/material-ui/src/Slider/Slider.test.js         |  6 +++---
 packages/material-ui/src/styles/index.js               |  1 -
 15 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/docs/src/pages/customization/color/color.md b/docs/src/pages/customization/color/color.md
index c6af96ff7883aa..239915b91f0829 100644
--- a/docs/src/pages/customization/color/color.md
+++ b/docs/src/pages/customization/color/color.md
@@ -55,7 +55,7 @@ Alternatively, you can enter hex values in the Primary and Secondary text fields
 
 {{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
 
-The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`MuiThemeProvider`](/customization/theming/#theme-provider)):
+The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)):
 
 ```jsx
 import { createMuiTheme } from '@material-ui/core/styles';
diff --git a/docs/src/pages/customization/components/GlobalThemeOverride.js b/docs/src/pages/customization/components/GlobalThemeOverride.js
index 7390a8a86a5077..b2278f7e14322d 100644
--- a/docs/src/pages/customization/components/GlobalThemeOverride.js
+++ b/docs/src/pages/customization/components/GlobalThemeOverride.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
@@ -14,8 +14,8 @@ const theme = createMuiTheme({
 
 export default function GlobalThemeOverride() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>font-size: 1rem</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/components/GlobalThemeOverride.tsx b/docs/src/pages/customization/components/GlobalThemeOverride.tsx
index 7390a8a86a5077..b2278f7e14322d 100644
--- a/docs/src/pages/customization/components/GlobalThemeOverride.tsx
+++ b/docs/src/pages/customization/components/GlobalThemeOverride.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
@@ -14,8 +14,8 @@ const theme = createMuiTheme({
 
 export default function GlobalThemeOverride() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>font-size: 1rem</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/components/ThemeVariables.js b/docs/src/pages/customization/components/ThemeVariables.js
index c1e2750b03dca7..1f77cd2ae705fc 100644
--- a/docs/src/pages/customization/components/ThemeVariables.js
+++ b/docs/src/pages/customization/components/ThemeVariables.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
@@ -12,8 +12,8 @@ const theme = createMuiTheme({
 
 export default function ThemeVariables() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>font-size: 1rem</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/components/ThemeVariables.tsx b/docs/src/pages/customization/components/ThemeVariables.tsx
index c1e2750b03dca7..1f77cd2ae705fc 100644
--- a/docs/src/pages/customization/components/ThemeVariables.tsx
+++ b/docs/src/pages/customization/components/ThemeVariables.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const theme = createMuiTheme({
@@ -12,8 +12,8 @@ const theme = createMuiTheme({
 
 export default function ThemeVariables() {
   return (
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>font-size: 1rem</Button>
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/guides/testing/testing.md b/docs/src/pages/guides/testing/testing.md
index ffa30461b6a85e..686383c888742d 100644
--- a/docs/src/pages/guides/testing/testing.md
+++ b/docs/src/pages/guides/testing/testing.md
@@ -59,16 +59,16 @@ Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api
 
 ```jsx
 import { createMount } from '@material-ui/core/test-utils';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 
 describe('<MyComponent />', () => {
   let mount;
 
   function MySuccessButton({ children }) {
     return (
-      <MuiThemeProvider theme={{ success: { main: '#fff' } }}>
+      <ThemeProvider theme={{ success: { main: '#fff' } }}>
         {children}
-      </MuiThemeProvider>
+      </ThemeProvider>
     );
   }
 
diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 2e3d4a918b092a..951df1e9331d46 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -40,7 +40,7 @@ There are 3 possible APIs you can use to generate and apply styles, however they
 
 ```jsx
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -70,7 +70,7 @@ You can also [change this behavior](/styles/advanced/#string-templates), with so
 
 ```jsx
 import React from 'react';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({
@@ -95,7 +95,7 @@ export default function StyledComponents() {
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {
diff --git a/examples/cdn/index.html b/examples/cdn/index.html
index c29693ab7654fb..c831ee3efff34b 100644
--- a/examples/cdn/index.html
+++ b/examples/cdn/index.html
@@ -19,7 +19,7 @@
 const {
   colors,
   CssBaseline,
-  MuiThemeProvider,
+  ThemeProvider,
   Typography,
   Container,
   makeStyles,
@@ -107,11 +107,11 @@
 }
 
 ReactDOM.render(
-  <MuiThemeProvider theme={theme}>
+  <ThemeProvider theme={theme}>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
     <CssBaseline />
     <App />
-  </MuiThemeProvider>,
+  </ThemeProvider>,
   document.querySelector('#root'),
 );
     </script>
diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js
index 8e1771bed2af23..20bbe141a486d2 100644
--- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js
+++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { withTheme } from '@material-ui/core/styles';
 import withStyles from '@material-ui/core/styles/withStyles';
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
-import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
 import MenuItem from '@material-ui/core/MenuItem';
 import Tab from '@material-ui/core/Tab';
 import MuiTabs from '@material-ui/core/Tabs';
diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js
index a6e04008166a49..6fd2fab600e881 100644
--- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js
+++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withTheme, withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { withTheme, withStyles, createMuiTheme } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import Tab from '@material-ui/core/Tab';
 import MuiTabs from '@material-ui/core/Tabs';
diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js
index 3d5728bd3159c0..0fa9e55c1c87a3 100644
--- a/packages/material-ui/src/Collapse/Collapse.test.js
+++ b/packages/material-ui/src/Collapse/Collapse.test.js
@@ -4,7 +4,7 @@ import { spy, stub, useFakeTimers } from 'sinon';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import Collapse from './Collapse';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import { Transition } from 'react-transition-group';
 
 describe('<Collapse />', () => {
@@ -206,11 +206,11 @@ describe('<Collapse />', () => {
 
       const next1 = spy();
       const Test = props => (
-        <MuiThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
           <Collapse timeout="auto" onEntered={next1} {...props}>
             <div />
           </Collapse>
-        </MuiThemeProvider>
+        </ThemeProvider>
       );
       const wrapper = mount(<Test />);
 
diff --git a/packages/material-ui/src/Drawer/Drawer.test.js b/packages/material-ui/src/Drawer/Drawer.test.js
index f7675fc198a545..c05c16bb5fa0ce 100644
--- a/packages/material-ui/src/Drawer/Drawer.test.js
+++ b/packages/material-ui/src/Drawer/Drawer.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { assert } from 'chai';
 import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import describeConformance from '../test-utils/describeConformance';
 import Slide from '../Slide';
 import Paper from '../Paper';
@@ -245,21 +245,21 @@ describe('<Drawer />', () => {
         direction: 'rtl',
       });
       const wrapper1 = mount(
-        <MuiThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
           <Drawer open anchor="left">
             <div />
           </Drawer>
-        </MuiThemeProvider>,
+        </ThemeProvider>,
       );
       // slide direction for left is right, if left is switched to right, we should get left
       assert.strictEqual(wrapper1.find(Slide).props().direction, 'left');
 
       const wrapper2 = mount(
-        <MuiThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
           <Drawer open anchor="right">
             <div />
           </Drawer>
-        </MuiThemeProvider>,
+        </ThemeProvider>,
       );
       // slide direction for right is left, if right is switched to left, we should get right
       assert.strictEqual(wrapper2.find(Slide).props().direction, 'right');
diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js
index 84152dfb847e62..34d0e8fb8e94ca 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { getClasses } from '@material-ui/core/test-utils';
 import { createClientRender } from 'test/utils/createClientRender';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import NotchedOutline from './NotchedOutline';
 
 describe('<NotchedOutline />', () => {
@@ -36,25 +36,25 @@ describe('<NotchedOutline />', () => {
 
   it('should set alignment rtl', () => {
     const { container: container1 } = render(
-      <MuiThemeProvider
+      <ThemeProvider
         theme={createMuiTheme({
           direction: 'ltr',
         })}
       >
         <NotchedOutline {...defaultProps} />
-      </MuiThemeProvider>,
+      </ThemeProvider>,
     );
     expect(container1.querySelector('fieldset').style.paddingLeft).to.equal('8px');
     expect(container1.querySelector('legend').style.width).to.equal('35px');
 
     const { container: container2 } = render(
-      <MuiThemeProvider
+      <ThemeProvider
         theme={createMuiTheme({
           direction: 'rtl',
         })}
       >
         <NotchedOutline {...defaultProps} />
-      </MuiThemeProvider>,
+      </ThemeProvider>,
     );
     expect(container2.querySelector('fieldset').style.paddingRight).to.equal('8px');
     expect(container2.querySelector('legend').style.width).to.equal('35px');
diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
index c8779ed7587cf9..83a49d899bbdb6 100644
--- a/packages/material-ui/src/Slider/Slider.test.js
+++ b/packages/material-ui/src/Slider/Slider.test.js
@@ -4,7 +4,7 @@ import { spy, stub } from 'sinon';
 import { expect } from 'chai';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import Slider from './Slider';
@@ -419,13 +419,13 @@ describe('<Slider />', () => {
   it('should handle RTL', () => {
     const handleChange = spy();
     const { container, getByRole } = render(
-      <MuiThemeProvider
+      <ThemeProvider
         theme={createMuiTheme({
           direction: 'rtl',
         })}
       >
         <Slider value={30} onChange={handleChange} />
-      </MuiThemeProvider>,
+      </ThemeProvider>,
     );
     const thumb = getByRole('slider');
     expect(thumb.style.right).to.equal('30%');
diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js
index 42e1661a5086be..82219293b414f7 100644
--- a/packages/material-ui/src/styles/index.js
+++ b/packages/material-ui/src/styles/index.js
@@ -2,7 +2,6 @@ export * from './colorManipulator';
 export { default as createMuiTheme } from './createMuiTheme';
 export { default as createStyles } from './createStyles';
 export { default as makeStyles } from './makeStyles';
-export { default as MuiThemeProvider } from './MuiThemeProvider';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
 export { default as styled } from './styled';
 export * from './transitions';

From a847c2c00849a7559689aeb039176dd2e2f49693 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Tue, 1 Oct 2019 16:07:15 +0100
Subject: [PATCH 11/12] basics - improve the core/styles vs styles wording

---
 docs/src/pages/styles/basics/basics.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 951df1e9331d46..1015c0982f145c 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -188,7 +188,7 @@ This button component has a color property that changes its color:
 
 {{"demo": "pages/styles/basics/AdaptingHOC.js"}}
 
-## Stress test
+### Stress test
 
 In the following stress test, you can update the *theme color* and the *background-color property* live:
 
@@ -203,13 +203,12 @@ const useStyles = makeStyles(theme => ({
 
 {{"demo": "pages/styles/basics/StressTest.js"}}
 
-## @material-ui/styles vs @material-ui/core/styles
+## @material-ui/core/styles vs @material-ui/styles
 
-Material-UI styles are powered by the [@material-ui/styles](https://www.npmjs.com/package/@material-ui/styles) npm package (and JSS).
-This solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles), it does not know about the default Material-UI theme.
-It can be used to style React applications that are not using Material-UI framework.
+Material-UI's styles are powered by the [@material-ui/styles](https://www.npmjs.com/package/@material-ui/styles) package, (built with JSS).
+This solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles). It doesn't have a default theme, and can be used to style React applications that are not using Material-UI components.
 
-To remove the need for injecting a theme in the React's context **systematically** and to reduce the number of manual installations a developer needs to do, the `@material-ui/styles` modules are re-exported from `@material-ui/core/styles` (with a default theme).
+ To reduce the number of packages required when used with Material-UI, and to simplify the imports, `@material-ui/styles` modules are re-exported from `@material-ui/core/styles`. To remove the need to systematically supply a theme, the default Material-UI theme is applied to `makeStyles`, `styled`, and `withStyles`.
 
 For instance:
 
@@ -217,6 +216,6 @@ For instance:
 // Re-export with a default theme
 import { makeStyles } from '@material-ui/core/styles';
 
-// Original module
+// Original module with no default theme
 import { makeStyles } from '@material-ui/styles';
 ```

From 0f05e13fb9dad0b819065254c194db1d07f96d4d Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Thu, 3 Oct 2019 20:27:46 +0200
Subject: [PATCH 12/12] Review

---
 docs/src/pages/styles/basics/basics.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 1015c0982f145c..28a0b93f4c5e45 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -208,7 +208,9 @@ const useStyles = makeStyles(theme => ({
 Material-UI's styles are powered by the [@material-ui/styles](https://www.npmjs.com/package/@material-ui/styles) package, (built with JSS).
 This solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles). It doesn't have a default theme, and can be used to style React applications that are not using Material-UI components.
 
- To reduce the number of packages required when used with Material-UI, and to simplify the imports, `@material-ui/styles` modules are re-exported from `@material-ui/core/styles`. To remove the need to systematically supply a theme, the default Material-UI theme is applied to `makeStyles`, `styled`, and `withStyles`.
+To reduce the number of packages to install when using Material-UI, and to simplify the imports, `@material-ui/styles` modules are re-exported from `@material-ui/core/styles`.
+
+To remove the need to systematically supply a theme, the default Material-UI theme is applied to the re-exported `makeStyles`, `styled`, `withTheme`, `useTheme`, and `withStyles` modules.
 
 For instance: