From 936029e578dba39d49776b6946cb2562790c8e2b Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 8 Dec 2020 18:41:23 +0100
Subject: [PATCH 01/24] init

---
 .../material-ui-styled-engine-sc/src/StylesProvider.js |  6 ++++++
 packages/material-ui-styled-engine-sc/src/index.js     |  2 ++
 packages/material-ui-styled-engine/package.json        |  1 +
 .../material-ui-styled-engine/src/StylesProvider.js    | 10 ++++++++++
 packages/material-ui-styled-engine/src/index.js        |  1 +
 packages/material-ui/src/styles/ThemeProvider.js       | 10 ++++++----
 6 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 packages/material-ui-styled-engine-sc/src/StylesProvider.js
 create mode 100644 packages/material-ui-styled-engine/src/StylesProvider.js

diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider.js
new file mode 100644
index 00000000000000..b344c3cb7c72ca
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider.js
@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+// Dumb component that does nothin, but complies with the API exported from @material-ui/styled-engine
+export function StyleProvider(props) {
+  return <>{props.children}</>;
+}
diff --git a/packages/material-ui-styled-engine-sc/src/index.js b/packages/material-ui-styled-engine-sc/src/index.js
index 8fb1b642d592be..664d41c8a8acb5 100644
--- a/packages/material-ui-styled-engine-sc/src/index.js
+++ b/packages/material-ui-styled-engine-sc/src/index.js
@@ -12,3 +12,5 @@ export default function styled(tag, options) {
 }
 
 export { ThemeContext } from 'styled-components';
+
+export { default as StylesProvider } from './StylesProvider';
diff --git a/packages/material-ui-styled-engine/package.json b/packages/material-ui-styled-engine/package.json
index 02f11db918669e..ec28ae3365c4e2 100644
--- a/packages/material-ui-styled-engine/package.json
+++ b/packages/material-ui-styled-engine/package.json
@@ -41,6 +41,7 @@
     "@babel/runtime": "^7.4.4"
   },
   "peerDependencies": {
+    "@emotion/cache": "^11.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0"
   },
diff --git a/packages/material-ui-styled-engine/src/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider.js
new file mode 100644
index 00000000000000..3911f2c13af46a
--- /dev/null
+++ b/packages/material-ui-styled-engine/src/StylesProvider.js
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+
+// Cache with option to prepend emotion's style tag 
+export const cache = createCache({ key: 'css', prepend: true });
+
+export function StyleProvider(props) {
+  return <CacheProvider value={cache}>{props.children}</CacheProvider>
+}
diff --git a/packages/material-ui-styled-engine/src/index.js b/packages/material-ui-styled-engine/src/index.js
index 977d7871b40492..04a7c020d6c3b0 100644
--- a/packages/material-ui-styled-engine/src/index.js
+++ b/packages/material-ui-styled-engine/src/index.js
@@ -1,2 +1,3 @@
 export { default } from '@emotion/styled';
 export { ThemeContext } from '@emotion/react';
+export { default as StylesProvider } from './StylesProvider';
diff --git a/packages/material-ui/src/styles/ThemeProvider.js b/packages/material-ui/src/styles/ThemeProvider.js
index fa2f8584e1dd4b..ee3f93ec0ba22a 100644
--- a/packages/material-ui/src/styles/ThemeProvider.js
+++ b/packages/material-ui/src/styles/ThemeProvider.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles';
 import { exactProp } from '@material-ui/utils';
-import { ThemeContext as StyledEngineThemeContext } from '@material-ui/styled-engine';
+import { ThemeContext as StyledEngineThemeContext, StylesProvider } from '@material-ui/styled-engine';
 import useTheme from './useTheme';
 
 function InnerThemeProvider(props) {
@@ -29,9 +29,11 @@ function ThemeProvider(props) {
   const { children, theme: localTheme } = props;
 
   return (
-    <MuiThemeProvider theme={localTheme}>
-      <InnerThemeProvider>{children}</InnerThemeProvider>
-    </MuiThemeProvider>
+    <StylesProvider>
+      <MuiThemeProvider theme={localTheme}>
+        <InnerThemeProvider>{children}</InnerThemeProvider>
+      </MuiThemeProvider>
+    </StylesProvider>
   );
 }
 

From 50e77e8c29b5c09f1142308a8385224a04ab07bd Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 15:44:18 +0100
Subject: [PATCH 02/24] wip

---
 docs/src/modules/utils/getDemoConfig.js       |  6 ++++--
 .../material-ui-styled-engine-sc/package.json |  4 +++-
 .../src/StylesProvider.js                     | 21 ++++++++++++++++---
 .../material-ui-styled-engine/package.json    |  3 ++-
 .../src/StylesProvider.js                     | 20 ++++++++++++++++--
 .../material-ui-styled-engine/src/index.d.ts  |  1 +
 6 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js
index 0f0d75cb19684a..4fbf8310bf16a1 100644
--- a/docs/src/modules/utils/getDemoConfig.js
+++ b/docs/src/modules/utils/getDemoConfig.js
@@ -11,9 +11,10 @@ function jsDemo(demoData) {
       'index.js': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { StylesProvider } from '@material-ui/styled-engine';
 import Demo from './demo';
 
-ReactDOM.render(<Demo />, document.querySelector('#root'));
+ReactDOM.render(<StylesProvider injectFirst><Demo /></StylesProvider>, document.querySelector('#root'));
     `.trim(),
     },
   };
@@ -30,9 +31,10 @@ function tsDemo(demoData) {
       'index.tsx': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { StylesProvider } from '@material-ui/styled-engine';
 import Demo from './demo';
 
-ReactDOM.render(<Demo />, document.querySelector('#root'));
+ReactDOM.render(<StylesProvider injectFirst><Demo /></StylesProvider>, document.querySelector('#root'));
     `.trim(),
       'tsconfig.json': `{
   "compilerOptions": {
diff --git a/packages/material-ui-styled-engine-sc/package.json b/packages/material-ui-styled-engine-sc/package.json
index 6f682be02bc83d..f2f99502df5375 100644
--- a/packages/material-ui-styled-engine-sc/package.json
+++ b/packages/material-ui-styled-engine-sc/package.json
@@ -37,7 +37,9 @@
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styles/**/*.test.{js,ts,tsx}'",
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
-  "dependencies": {},
+  "dependencies": {
+    "prop-types": "^15.7.2",
+  },
   "peerDependencies": {
     "@types/styled-components": "^5.1.3",
     "styled-components": "^5.0.0"
diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider.js
index b344c3cb7c72ca..441d0468afb3e5 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider.js
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider.js
@@ -1,6 +1,21 @@
-import * as React from 'react';
+import PropTypes from 'prop-types';
 
 // Dumb component that does nothin, but complies with the API exported from @material-ui/styled-engine
-export function StyleProvider(props) {
-  return <>{props.children}</>;
+export function StylesProvider({ chlidren }) {
+  return chlidren;
 }
+
+StylesProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * By default, the styles are injected last in the <head> element of the page.
+   * As a result, they gain more specificity than any other style sheet.
+   * If you want to override Material-UI's styles, set this prop.
+   */
+  injectFirst: PropTypes.bool,
+};
+
+export default StylesProvider;
\ No newline at end of file
diff --git a/packages/material-ui-styled-engine/package.json b/packages/material-ui-styled-engine/package.json
index ec28ae3365c4e2..ff2c378d1b1fcd 100644
--- a/packages/material-ui-styled-engine/package.json
+++ b/packages/material-ui-styled-engine/package.json
@@ -38,7 +38,8 @@
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.4"
+    "@babel/runtime": "^7.4.4",
+    "prop-types": "^15.7.2",
   },
   "peerDependencies": {
     "@emotion/cache": "^11.0.0",
diff --git a/packages/material-ui-styled-engine/src/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider.js
index 3911f2c13af46a..5ee8975df3e322 100644
--- a/packages/material-ui-styled-engine/src/StylesProvider.js
+++ b/packages/material-ui-styled-engine/src/StylesProvider.js
@@ -1,10 +1,26 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 
 // Cache with option to prepend emotion's style tag 
 export const cache = createCache({ key: 'css', prepend: true });
 
-export function StyleProvider(props) {
-  return <CacheProvider value={cache}>{props.children}</CacheProvider>
+export function StylesProvider({ injectFirst }) {
+  return injectFirst ? <CacheProvider value={cache}>{props.children}</CacheProvider> : props.children;
 }
+
+StylesProvider.propTypes = {
+    /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * By default, the styles are injected last in the <head> element of the page.
+   * As a result, they gain more specificity than any other style sheet.
+   * If you want to override Material-UI's styles, set this prop.
+   */
+  injectFirst: PropTypes.bool,
+};
+
+export default StylesProvider;
\ No newline at end of file
diff --git a/packages/material-ui-styled-engine/src/index.d.ts b/packages/material-ui-styled-engine/src/index.d.ts
index f4c907cb70b449..588c83293e2338 100644
--- a/packages/material-ui-styled-engine/src/index.d.ts
+++ b/packages/material-ui-styled-engine/src/index.d.ts
@@ -1,3 +1,4 @@
 export * from '@emotion/styled';
 export { default } from '@emotion/styled';
 export { ThemeContext } from '@emotion/react';
+export { default as StylesProvider } from './StylesProvider';

From c85331fdf8c2c17e7f87412a94a249f2f63ef1ba Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 15:51:55 +0100
Subject: [PATCH 03/24] reverted theme provider changes

---
 packages/material-ui/src/styles/ThemeProvider.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/material-ui/src/styles/ThemeProvider.js b/packages/material-ui/src/styles/ThemeProvider.js
index ee3f93ec0ba22a..fa2f8584e1dd4b 100644
--- a/packages/material-ui/src/styles/ThemeProvider.js
+++ b/packages/material-ui/src/styles/ThemeProvider.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles';
 import { exactProp } from '@material-ui/utils';
-import { ThemeContext as StyledEngineThemeContext, StylesProvider } from '@material-ui/styled-engine';
+import { ThemeContext as StyledEngineThemeContext } from '@material-ui/styled-engine';
 import useTheme from './useTheme';
 
 function InnerThemeProvider(props) {
@@ -29,11 +29,9 @@ function ThemeProvider(props) {
   const { children, theme: localTheme } = props;
 
   return (
-    <StylesProvider>
-      <MuiThemeProvider theme={localTheme}>
-        <InnerThemeProvider>{children}</InnerThemeProvider>
-      </MuiThemeProvider>
-    </StylesProvider>
+    <MuiThemeProvider theme={localTheme}>
+      <InnerThemeProvider>{children}</InnerThemeProvider>
+    </MuiThemeProvider>
   );
 }
 

From 8df76a5fcb40e6b9ea7998f6cde2f023d159eaa6 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 15:55:04 +0100
Subject: [PATCH 04/24] package.json

---
 packages/material-ui-styled-engine-sc/package.json | 2 +-
 packages/material-ui-styled-engine/package.json    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui-styled-engine-sc/package.json b/packages/material-ui-styled-engine-sc/package.json
index f2f99502df5375..584c553b838ad3 100644
--- a/packages/material-ui-styled-engine-sc/package.json
+++ b/packages/material-ui-styled-engine-sc/package.json
@@ -38,7 +38,7 @@
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
   "dependencies": {
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "@types/styled-components": "^5.1.3",
diff --git a/packages/material-ui-styled-engine/package.json b/packages/material-ui-styled-engine/package.json
index ff2c378d1b1fcd..e3b75c2761714d 100644
--- a/packages/material-ui-styled-engine/package.json
+++ b/packages/material-ui-styled-engine/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "@emotion/cache": "^11.0.0",

From 0f82a97e024db427c2620638db1875b79e877f78 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 16:09:16 +0100
Subject: [PATCH 05/24] prettier

---
 .../src/StylesProvider.js                            |  2 +-
 .../material-ui-styled-engine/src/StylesProvider.js  | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider.js
index 441d0468afb3e5..58bbd11f81815b 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider.js
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider.js
@@ -18,4 +18,4 @@ StylesProvider.propTypes = {
   injectFirst: PropTypes.bool,
 };
 
-export default StylesProvider;
\ No newline at end of file
+export default StylesProvider;
diff --git a/packages/material-ui-styled-engine/src/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider.js
index 5ee8975df3e322..845a679603ae30 100644
--- a/packages/material-ui-styled-engine/src/StylesProvider.js
+++ b/packages/material-ui-styled-engine/src/StylesProvider.js
@@ -3,15 +3,19 @@ import PropTypes from 'prop-types';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 
-// Cache with option to prepend emotion's style tag 
+// Cache with option to prepend emotion's style tag
 export const cache = createCache({ key: 'css', prepend: true });
 
 export function StylesProvider({ injectFirst }) {
-  return injectFirst ? <CacheProvider value={cache}>{props.children}</CacheProvider> : props.children;
+  return injectFirst ? (
+    <CacheProvider value={cache}>{props.children}</CacheProvider>
+  ) : (
+    props.children
+  );
 }
 
 StylesProvider.propTypes = {
-    /**
+  /**
    * Your component tree.
    */
   children: PropTypes.node,
@@ -23,4 +27,4 @@ StylesProvider.propTypes = {
   injectFirst: PropTypes.bool,
 };
 
-export default StylesProvider;
\ No newline at end of file
+export default StylesProvider;

From c7716a71c19e600e3f3d66a890053120cacb8dd8 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 16:28:44 +0100
Subject: [PATCH 06/24] fix

---
 packages/material-ui-styled-engine/src/StylesProvider.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui-styled-engine/src/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider.js
index 845a679603ae30..890751c258b911 100644
--- a/packages/material-ui-styled-engine/src/StylesProvider.js
+++ b/packages/material-ui-styled-engine/src/StylesProvider.js
@@ -6,9 +6,9 @@ import createCache from '@emotion/cache';
 // Cache with option to prepend emotion's style tag
 export const cache = createCache({ key: 'css', prepend: true });
 
-export function StylesProvider({ injectFirst }) {
+export function StylesProvider({ injectFirst, children }) {
   return injectFirst ? (
-    <CacheProvider value={cache}>{props.children}</CacheProvider>
+    <CacheProvider value={cache}>{children}</CacheProvider>
   ) : (
     props.children
   );

From 3c9ab551dc7dc2963f148e733882779639f64876 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 18:35:19 +0100
Subject: [PATCH 07/24] exported from core

---
 docs/src/modules/utils/getDemoConfig.js | 8 ++++----
 packages/material-ui/src/index.d.ts     | 2 ++
 packages/material-ui/src/index.js       | 2 ++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js
index 4fbf8310bf16a1..af13b0154a41be 100644
--- a/docs/src/modules/utils/getDemoConfig.js
+++ b/docs/src/modules/utils/getDemoConfig.js
@@ -11,10 +11,10 @@ function jsDemo(demoData) {
       'index.js': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { StylesProvider } from '@material-ui/styled-engine';
+import { StyledEngineProvider } from '@material-ui/core';
 import Demo from './demo';
 
-ReactDOM.render(<StylesProvider injectFirst><Demo /></StylesProvider>, document.querySelector('#root'));
+ReactDOM.render(<StyledEngineProvider injectFirst><Demo /></StyledEngineProvider>, document.querySelector('#root'));
     `.trim(),
     },
   };
@@ -31,10 +31,10 @@ function tsDemo(demoData) {
       'index.tsx': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { StylesProvider } from '@material-ui/styled-engine';
+import { StyledEngineProvider } from '@material-ui/core';
 import Demo from './demo';
 
-ReactDOM.render(<StylesProvider injectFirst><Demo /></StylesProvider>, document.querySelector('#root'));
+ReactDOM.render(<StyledEngineProvider injectFirst><Demo /></StyledEngineProvider>, document.querySelector('#root'));
     `.trim(),
       'tsconfig.json': `{
   "compilerOptions": {
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index 099c11db87ed02..454ad1d5b6367a 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -467,3 +467,5 @@ export * from './Zoom';
 
 export { default as useAutocomplete } from './useAutocomplete';
 export * from './useAutocomplete';
+
+export { StylesProvider as StyledEngineProvider } from '@material-ui/styled-engine';
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index d50c6a11e1647f..21fd4b385a0072 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -400,3 +400,5 @@ export * from './Zoom';
 
 // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
+
+export { StylesProvider as StyledEngineProvider } from '@material-ui/styled-engine';

From 2bca0df38c8cdeeab7aee160d2c8b949baed8c74 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 18:49:20 +0100
Subject: [PATCH 08/24] fixes

---
 .../src/StylesProvider/StylesProvider.d.ts                | 8 ++++++++
 .../src/{ => StylesProvider}/StylesProvider.js            | 0
 .../src/StylesProvider/index.d.ts                         | 2 ++
 .../src/StylesProvider/index.js                           | 1 +
 packages/material-ui-styled-engine-sc/src/index.d.ts      | 2 ++
 .../src/StylesProvider/StylesProvider.d.ts                | 8 ++++++++
 .../src/{ => StylesProvider}/StylesProvider.js            | 0
 .../src/StylesProvider/index.d.ts                         | 2 ++
 .../material-ui-styled-engine/src/StylesProvider/index.js | 1 +
 9 files changed, 24 insertions(+)
 create mode 100644 packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts
 rename packages/material-ui-styled-engine-sc/src/{ => StylesProvider}/StylesProvider.js (100%)
 create mode 100644 packages/material-ui-styled-engine-sc/src/StylesProvider/index.d.ts
 create mode 100644 packages/material-ui-styled-engine-sc/src/StylesProvider/index.js
 create mode 100644 packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts
 rename packages/material-ui-styled-engine/src/{ => StylesProvider}/StylesProvider.js (100%)
 create mode 100644 packages/material-ui-styled-engine/src/StylesProvider/index.d.ts
 create mode 100644 packages/material-ui-styled-engine/src/StylesProvider/index.js

diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts
new file mode 100644
index 00000000000000..bde0ed66eaf56a
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface StylesProviderProps { 
+  children?: React.ReactNode;
+  injectFirst?: boolean;
+}
+
+export default function StylesProvider(props: StylesProviderProps): JSX.Element;
diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
similarity index 100%
rename from packages/material-ui-styled-engine-sc/src/StylesProvider.js
rename to packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/index.d.ts b/packages/material-ui-styled-engine-sc/src/StylesProvider/index.d.ts
new file mode 100644
index 00000000000000..c96fc5c74eec11
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './StylesProvider';
+export * from './StylesProvider';
diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/index.js b/packages/material-ui-styled-engine-sc/src/StylesProvider/index.js
new file mode 100644
index 00000000000000..93882ba3578606
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/index.js
@@ -0,0 +1 @@
+export { default } from './StylesProvider';
diff --git a/packages/material-ui-styled-engine-sc/src/index.d.ts b/packages/material-ui-styled-engine-sc/src/index.d.ts
index b023957e85fe10..35e70c53c3a40f 100644
--- a/packages/material-ui-styled-engine-sc/src/index.d.ts
+++ b/packages/material-ui-styled-engine-sc/src/index.d.ts
@@ -1,2 +1,4 @@
 export * from 'styled-components';
 export { default } from 'styled-components';
+export { default as StylesProvider } from './StylesProvider';
+
diff --git a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts
new file mode 100644
index 00000000000000..bde0ed66eaf56a
--- /dev/null
+++ b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface StylesProviderProps { 
+  children?: React.ReactNode;
+  injectFirst?: boolean;
+}
+
+export default function StylesProvider(props: StylesProviderProps): JSX.Element;
diff --git a/packages/material-ui-styled-engine/src/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
similarity index 100%
rename from packages/material-ui-styled-engine/src/StylesProvider.js
rename to packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
diff --git a/packages/material-ui-styled-engine/src/StylesProvider/index.d.ts b/packages/material-ui-styled-engine/src/StylesProvider/index.d.ts
new file mode 100644
index 00000000000000..c96fc5c74eec11
--- /dev/null
+++ b/packages/material-ui-styled-engine/src/StylesProvider/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './StylesProvider';
+export * from './StylesProvider';
diff --git a/packages/material-ui-styled-engine/src/StylesProvider/index.js b/packages/material-ui-styled-engine/src/StylesProvider/index.js
new file mode 100644
index 00000000000000..93882ba3578606
--- /dev/null
+++ b/packages/material-ui-styled-engine/src/StylesProvider/index.js
@@ -0,0 +1 @@
+export { default } from './StylesProvider';

From 6bcc9204074c864cc57b51e8fb31cc6122641bd3 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 18:50:43 +0100
Subject: [PATCH 09/24] fixes

---
 .../src/StylesProvider/StylesProvider.js                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
index 890751c258b911..e2d6df7b353d6d 100644
--- a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
@@ -10,7 +10,7 @@ export function StylesProvider({ injectFirst, children }) {
   return injectFirst ? (
     <CacheProvider value={cache}>{children}</CacheProvider>
   ) : (
-    props.children
+    children
   );
 }
 

From 8fe327ddf0d1cd0b8c565d17d63e6c166f2e99fb Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 9 Dec 2020 19:01:21 +0100
Subject: [PATCH 10/24] new line

---
 packages/material-ui-styled-engine-sc/src/index.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/material-ui-styled-engine-sc/src/index.d.ts b/packages/material-ui-styled-engine-sc/src/index.d.ts
index 35e70c53c3a40f..4d49f3991c6810 100644
--- a/packages/material-ui-styled-engine-sc/src/index.d.ts
+++ b/packages/material-ui-styled-engine-sc/src/index.d.ts
@@ -1,4 +1,3 @@
 export * from 'styled-components';
 export { default } from 'styled-components';
 export { default as StylesProvider } from './StylesProvider';
-

From 7dd32b26ee3c0681a1af5997dceae6bf8261c7c6 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 10:06:21 +0100
Subject: [PATCH 11/24] fixed argos, prettier

---
 docs/src/modules/utils/getDemoConfig.js            | 14 ++++++++++++--
 .../src/StylesProvider/StylesProvider.d.ts         |  2 +-
 .../src/StylesProvider/StylesProvider.d.ts         |  2 +-
 .../src/StylesProvider/StylesProvider.js           |  6 +-----
 test/regressions/TestViewer.js                     |  9 ++++++---
 5 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js
index af13b0154a41be..dcec4194f4dcbc 100644
--- a/docs/src/modules/utils/getDemoConfig.js
+++ b/docs/src/modules/utils/getDemoConfig.js
@@ -14,7 +14,12 @@ import ReactDOM from 'react-dom';
 import { StyledEngineProvider } from '@material-ui/core';
 import Demo from './demo';
 
-ReactDOM.render(<StyledEngineProvider injectFirst><Demo /></StyledEngineProvider>, document.querySelector('#root'));
+ReactDOM.render(
+  <StyledEngineProvider injectFirst>
+    <Demo />
+  </StyledEngineProvider>,
+  document.querySelector("#root")
+);
     `.trim(),
     },
   };
@@ -34,7 +39,12 @@ import ReactDOM from 'react-dom';
 import { StyledEngineProvider } from '@material-ui/core';
 import Demo from './demo';
 
-ReactDOM.render(<StyledEngineProvider injectFirst><Demo /></StyledEngineProvider>, document.querySelector('#root'));
+ReactDOM.render(
+  <StyledEngineProvider injectFirst>
+    <Demo />
+  </StyledEngineProvider>,
+  document.querySelector("#root")
+);
     `.trim(),
       'tsconfig.json': `{
   "compilerOptions": {
diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts
index bde0ed66eaf56a..dad5d0ec4dc6a5 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export interface StylesProviderProps { 
+export interface StylesProviderProps {
   children?: React.ReactNode;
   injectFirst?: boolean;
 }
diff --git a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts
index bde0ed66eaf56a..dad5d0ec4dc6a5 100644
--- a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts
+++ b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export interface StylesProviderProps { 
+export interface StylesProviderProps {
   children?: React.ReactNode;
   injectFirst?: boolean;
 }
diff --git a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
index e2d6df7b353d6d..bbb90b3fc49d44 100644
--- a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
@@ -7,11 +7,7 @@ import createCache from '@emotion/cache';
 export const cache = createCache({ key: 'css', prepend: true });
 
 export function StylesProvider({ injectFirst, children }) {
-  return injectFirst ? (
-    <CacheProvider value={cache}>{children}</CacheProvider>
-  ) : (
-    children
-  );
+  return injectFirst ? <CacheProvider value={cache}>{children}</CacheProvider> : children;
 }
 
 StylesProvider.propTypes = {
diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index caeb89c11a1d98..e002b82c69a2c5 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useFakeTimers } from 'sinon';
+import { StyledEngineProvider } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = (theme) => ({
@@ -71,9 +72,11 @@ function TestViewer(props) {
   }, []);
 
   return (
-    <div aria-busy={!ready} data-testid="testcase" className={classes.root}>
-      {children}
-    </div>
+    <StyledEngineProvider injectFirst>
+      <div aria-busy={!ready} data-testid="testcase" className={classes.root}>
+        {children}
+      </div>
+    </StyledEngineProvider>
   );
 }
 

From d5ddc544eb6b11cbe87d108f035e13309d726d23 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 10:50:26 +0100
Subject: [PATCH 12/24] wip

---
 docs/pages/_app.js                             | 13 ++++++++-----
 .../src/StylesProvider/StylesProvider.js       | 18 +++++++++++++++---
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 984d209fcae2ad..2fed181afb5951 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -11,6 +11,7 @@ import { create } from 'jss';
 import jssRtl from 'jss-rtl';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StyledEngineProvider as CoreStyledEngineProvider } from '@material-ui/core';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -318,11 +319,13 @@ function AppWrapper(props) {
       </NextHead>
       <ReduxProvider store={redux}>
         <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-          <StylesProvider jss={jss}>
-            <ThemeProvider>
-              <StyledEngineProvider>{children}</StyledEngineProvider>
-            </ThemeProvider>
-          </StylesProvider>
+          <CoreStyledEngineProvider injectFirst>
+            <StylesProvider jss={jss}>
+              <ThemeProvider>
+                <StyledEngineProvider>{children}</StyledEngineProvider>
+              </ThemeProvider>
+            </StylesProvider>
+          </CoreStyledEngineProvider>
         </PageContext.Provider>
         <LanguageNegotiation />
         <Analytics />
diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
index 58bbd11f81815b..cfbca6f57fe6fa 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
@@ -1,8 +1,20 @@
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
-// Dumb component that does nothin, but complies with the API exported from @material-ui/styled-engine
-export function StylesProvider({ chlidren }) {
-  return chlidren;
+let injectFirstNode;
+
+export function StylesProvider({ injectFirst, children }) {
+  React.useEffect(() => {
+    if (injectFirst && !injectFirstNode) {
+      const head = document.head;
+      injectFirstNode = document.createElement('style');
+      injectFirstNode.setAttribute('data-styled', 'active');
+      injectFirstNode.setAttribute('data-styled-version', '5.2.1');
+      head.insertBefore(injectFirstNode, head.firstChild);
+    }
+  }, [injectFirst]);
+
+  return children;
 }
 
 StylesProvider.propTypes = {

From 591b91e451035e2435ae8f3489fae06c7c874cae Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 18:18:03 +0100
Subject: [PATCH 13/24] Update
 packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 .../src/StylesProvider/StylesProvider.js                       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
index bbb90b3fc49d44..7973060c57e22e 100644
--- a/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine/src/StylesProvider/StylesProvider.js
@@ -6,7 +6,8 @@ import createCache from '@emotion/cache';
 // Cache with option to prepend emotion's style tag
 export const cache = createCache({ key: 'css', prepend: true });
 
-export function StylesProvider({ injectFirst, children }) {
+export function StylesProvider(props) {
+  const { injectFirst, children } = props;
   return injectFirst ? <CacheProvider value={cache}>{children}</CacheProvider> : children;
 }
 

From 3d209a8810791e12caa5f2ee6150491913391b4a Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 18:49:44 +0100
Subject: [PATCH 14/24] fixed package.json, fixed styled-components

---
 .../src/StylesProvider/StylesProvider.js             | 12 +++++++++---
 packages/material-ui-styled-engine/package.json      |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
index cfbca6f57fe6fa..98c40f6191a94e 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
@@ -1,20 +1,26 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { StyleSheetManager } from 'styled-components';
 
 let injectFirstNode;
 
-export function StylesProvider({ injectFirst, children }) {
+export function StylesProvider(props) {
+  const { injectFirst, children } = props;
+
   React.useEffect(() => {
     if (injectFirst && !injectFirstNode) {
       const head = document.head;
       injectFirstNode = document.createElement('style');
       injectFirstNode.setAttribute('data-styled', 'active');
-      injectFirstNode.setAttribute('data-styled-version', '5.2.1');
       head.insertBefore(injectFirstNode, head.firstChild);
     }
   }, [injectFirst]);
 
-  return children;
+  return injectFirst ? (
+    <StyleSheetManager target={injectFirstNode}>{children}</StyleSheetManager>
+  ) : (
+    children
+  );
 }
 
 StylesProvider.propTypes = {
diff --git a/packages/material-ui-styled-engine/package.json b/packages/material-ui-styled-engine/package.json
index e3b75c2761714d..2b6dba5643e60e 100644
--- a/packages/material-ui-styled-engine/package.json
+++ b/packages/material-ui-styled-engine/package.json
@@ -39,10 +39,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
+    "@emotion/cache": "^11.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "@emotion/cache": "^11.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0"
   },

From 3e49e2ccafe97c29e0670b31981584c4fc09d1a8 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 19:01:05 +0100
Subject: [PATCH 15/24] renamed export

---
 docs/pages/_app.js                      |  6 +++---
 docs/src/modules/utils/getDemoConfig.js | 12 ++++++------
 packages/material-ui/src/index.js       |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 2fed181afb5951..bdfddb32664eac 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -11,7 +11,7 @@ import { create } from 'jss';
 import jssRtl from 'jss-rtl';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
-import { StyledEngineProvider as CoreStyledEngineProvider } from '@material-ui/core';
+import { StylesProvider as CoreStylesProvider } from '@material-ui/core';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -319,13 +319,13 @@ function AppWrapper(props) {
       </NextHead>
       <ReduxProvider store={redux}>
         <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-          <CoreStyledEngineProvider injectFirst>
+          <CoreStylesProvider injectFirst>
             <StylesProvider jss={jss}>
               <ThemeProvider>
                 <StyledEngineProvider>{children}</StyledEngineProvider>
               </ThemeProvider>
             </StylesProvider>
-          </CoreStyledEngineProvider>
+          </CoreStylesProvider>
         </PageContext.Provider>
         <LanguageNegotiation />
         <Analytics />
diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js
index dcec4194f4dcbc..3fcc46d9993a1c 100644
--- a/docs/src/modules/utils/getDemoConfig.js
+++ b/docs/src/modules/utils/getDemoConfig.js
@@ -11,13 +11,13 @@ function jsDemo(demoData) {
       'index.js': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { StyledEngineProvider } from '@material-ui/core';
+import { StylesProvider } from '@material-ui/core';
 import Demo from './demo';
 
 ReactDOM.render(
-  <StyledEngineProvider injectFirst>
+  <StylesProvider injectFirst>
     <Demo />
-  </StyledEngineProvider>,
+  </StylesProvider>,
   document.querySelector("#root")
 );
     `.trim(),
@@ -36,13 +36,13 @@ function tsDemo(demoData) {
       'index.tsx': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { StyledEngineProvider } from '@material-ui/core';
+import { StylesProvider } from '@material-ui/core';
 import Demo from './demo';
 
 ReactDOM.render(
-  <StyledEngineProvider injectFirst>
+  <StylesProvider injectFirst>
     <Demo />
-  </StyledEngineProvider>,
+  </StylesProvider>,
   document.querySelector("#root")
 );
     `.trim(),
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 21fd4b385a0072..ca393c72548c33 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -401,4 +401,4 @@ export * from './Zoom';
 // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
 
-export { StylesProvider as StyledEngineProvider } from '@material-ui/styled-engine';
+export { StylesProvider } from '@material-ui/styled-engine';

From ff763d8c42bfefa49e582535040334cb27002ade Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 19:01:22 +0100
Subject: [PATCH 16/24] renamed export

---
 packages/material-ui/src/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index 454ad1d5b6367a..7baeb672b183f6 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -468,4 +468,4 @@ export * from './Zoom';
 export { default as useAutocomplete } from './useAutocomplete';
 export * from './useAutocomplete';
 
-export { StylesProvider as StyledEngineProvider } from '@material-ui/styled-engine';
+export { StylesProvider } from '@material-ui/styled-engine';

From a828f5037cc13434d209170b54f4ea20b2f10412 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 19:35:46 +0100
Subject: [PATCH 17/24] Update test/regressions/TestViewer.js

---
 test/regressions/TestViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index e002b82c69a2c5..5986ac59fbe7bf 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -76,7 +76,7 @@ function TestViewer(props) {
       <div aria-busy={!ready} data-testid="testcase" className={classes.root}>
         {children}
       </div>
-    </StyledEngineProvider>
+    </StylesProvider>
   );
 }
 

From f5eff4a2f42c2cfff8d0a138f702df932a1c027c Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 19:35:59 +0100
Subject: [PATCH 18/24] Update test/regressions/TestViewer.js

---
 test/regressions/TestViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index 5986ac59fbe7bf..23f9ace3323e51 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -72,7 +72,7 @@ function TestViewer(props) {
   }, []);
 
   return (
-    <StyledEngineProvider injectFirst>
+    <StylesProvider injectFirst>
       <div aria-busy={!ready} data-testid="testcase" className={classes.root}>
         {children}
       </div>

From 5d7effded0654708a75c6a04493bfc4cb5bc2d69 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 10 Dec 2020 19:36:16 +0100
Subject: [PATCH 19/24] Update test/regressions/TestViewer.js

---
 test/regressions/TestViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index 23f9ace3323e51..d5b8fd6e0917ae 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useFakeTimers } from 'sinon';
-import { StyledEngineProvider } from '@material-ui/core';
+import { StylesProvider } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = (theme) => ({

From 445bd83a5371b79dc4083662fa6896362a69565d Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 11 Dec 2020 09:03:44 +0100
Subject: [PATCH 20/24] added boxSizing border-box

---
 docs/src/pages/components/drawers/ClippedDrawer.js             | 1 +
 docs/src/pages/components/drawers/ClippedDrawer.tsx            | 1 +
 docs/src/pages/components/drawers/MiniDrawer.js                | 3 +++
 docs/src/pages/components/drawers/MiniDrawer.tsx               | 3 +++
 docs/src/pages/components/drawers/PermanentDrawerRight.js      | 1 +
 docs/src/pages/components/drawers/PermanentDrawerRight.tsx     | 1 +
 docs/src/pages/components/drawers/PersistentDrawerLeft.js      | 1 +
 docs/src/pages/components/drawers/PersistentDrawerLeft.tsx     | 1 +
 docs/src/pages/components/drawers/ResponsiveDrawer.js          | 1 +
 docs/src/pages/components/drawers/ResponsiveDrawer.tsx         | 1 +
 .../src/pages/getting-started/templates/dashboard/Dashboard.js | 1 +
 .../pages/getting-started/templates/dashboard/Dashboard.tsx    | 1 +
 12 files changed, 16 insertions(+)

diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js
index f7686da23e6119..9dcf817110b05a 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.js
+++ b/docs/src/pages/components/drawers/ClippedDrawer.js
@@ -28,6 +28,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   drawerContainer: {
     overflow: 'auto',
diff --git a/docs/src/pages/components/drawers/ClippedDrawer.tsx b/docs/src/pages/components/drawers/ClippedDrawer.tsx
index 7af4d6e15a6975..68ba8af48cd058 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.tsx
+++ b/docs/src/pages/components/drawers/ClippedDrawer.tsx
@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     drawerContainer: {
       overflow: 'auto',
diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js
index 37bd4c3cd94715..c0b9f2ac375b10 100644
--- a/docs/src/pages/components/drawers/MiniDrawer.js
+++ b/docs/src/pages/components/drawers/MiniDrawer.js
@@ -50,6 +50,9 @@ const useStyles = makeStyles((theme) => ({
     flexShrink: 0,
     whiteSpace: 'nowrap',
   },
+  drawerPaper: {
+    boxSizing: 'border-box',
+  },
   drawerOpen: {
     width: drawerWidth,
     transition: theme.transitions.create('width', {
diff --git a/docs/src/pages/components/drawers/MiniDrawer.tsx b/docs/src/pages/components/drawers/MiniDrawer.tsx
index ef392108effee5..c08ff1706e686a 100644
--- a/docs/src/pages/components/drawers/MiniDrawer.tsx
+++ b/docs/src/pages/components/drawers/MiniDrawer.tsx
@@ -51,6 +51,9 @@ const useStyles = makeStyles((theme: Theme) =>
       flexShrink: 0,
       whiteSpace: 'nowrap',
     },
+    drawerPaper: {
+      boxSizing: 'border-box',
+    },
     drawerOpen: {
       width: drawerWidth,
       transition: theme.transitions.create('width', {
diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.js b/docs/src/pages/components/drawers/PermanentDrawerRight.js
index f6ada1b8474c53..94cd3c1d2d0889 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerRight.js
+++ b/docs/src/pages/components/drawers/PermanentDrawerRight.js
@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.tsx b/docs/src/pages/components/drawers/PermanentDrawerRight.tsx
index fb07942ddac63f..014b35e709cbdf 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerRight.tsx
+++ b/docs/src/pages/components/drawers/PermanentDrawerRight.tsx
@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.js b/docs/src/pages/components/drawers/PersistentDrawerLeft.js
index e73f52c1b1949b..fc23ec7de66f2b 100644
--- a/docs/src/pages/components/drawers/PersistentDrawerLeft.js
+++ b/docs/src/pages/components/drawers/PersistentDrawerLeft.js
@@ -50,6 +50,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   drawerHeader: {
     display: 'flex',
diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx b/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx
index 9ab70966ef30f4..8b8a9b53a7e98e 100644
--- a/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx
+++ b/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx
@@ -51,6 +51,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     drawerHeader: {
       display: 'flex',
diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js
index 9ca4861575c0dd..682707f1285df8 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.js
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js
@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme) => ({
   // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   drawerPaper: {
+    boxSizing: 'border-box',
     width: drawerWidth,
   },
   content: {
diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
index 9158b08af21b3d..40f458f61f3f61 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
     // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     drawerPaper: {
+      boxSizing: 'border-box',
       width: drawerWidth,
     },
     content: {
diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
index 9a2360ffec3777..4d05523640f330 100644
--- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
+++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
@@ -84,6 +84,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
+    boxSizing: 'border-box',
   },
   drawerPaperClose: {
     overflowX: 'hidden',
diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
index 9a2360ffec3777..4d05523640f330 100644
--- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
+++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
@@ -84,6 +84,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
+    boxSizing: 'border-box',
   },
   drawerPaperClose: {
     overflowX: 'hidden',

From 1e1a33163faa683ea8e9341c0321e5ab11f6c643 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 11 Dec 2020 12:19:08 +0100
Subject: [PATCH 21/24] boxSizing

---
 docs/src/pages/components/drawers/MiniDrawer.js           | 2 --
 docs/src/pages/components/drawers/MiniDrawer.tsx          | 2 --
 docs/src/pages/components/drawers/PermanentDrawerLeft.js  | 1 +
 docs/src/pages/components/drawers/PermanentDrawerLeft.tsx | 1 +
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js
index c0b9f2ac375b10..944c1408e7ef92 100644
--- a/docs/src/pages/components/drawers/MiniDrawer.js
+++ b/docs/src/pages/components/drawers/MiniDrawer.js
@@ -49,8 +49,6 @@ const useStyles = makeStyles((theme) => ({
     width: drawerWidth,
     flexShrink: 0,
     whiteSpace: 'nowrap',
-  },
-  drawerPaper: {
     boxSizing: 'border-box',
   },
   drawerOpen: {
diff --git a/docs/src/pages/components/drawers/MiniDrawer.tsx b/docs/src/pages/components/drawers/MiniDrawer.tsx
index c08ff1706e686a..b1b3f5dba33941 100644
--- a/docs/src/pages/components/drawers/MiniDrawer.tsx
+++ b/docs/src/pages/components/drawers/MiniDrawer.tsx
@@ -50,8 +50,6 @@ const useStyles = makeStyles((theme: Theme) =>
       width: drawerWidth,
       flexShrink: 0,
       whiteSpace: 'nowrap',
-    },
-    drawerPaper: {
       boxSizing: 'border-box',
     },
     drawerOpen: {
diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.js b/docs/src/pages/components/drawers/PermanentDrawerLeft.js
index 15f1c40825fb36..ce2371a243cefd 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerLeft.js
+++ b/docs/src/pages/components/drawers/PermanentDrawerLeft.js
@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx b/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx
index ee9fa0f3c966d8..4a97f77e04ad8e 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx
+++ b/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx
@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,

From d1e122da030026817312a1dda8556d5866d3a334 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 11 Dec 2020 16:48:45 +0100
Subject: [PATCH 22/24] added cleanup method

---
 .../src/StylesProvider/StylesProvider.js                     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
index 98c40f6191a94e..b75d99ad54e56b 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
@@ -14,6 +14,11 @@ export function StylesProvider(props) {
       injectFirstNode.setAttribute('data-styled', 'active');
       head.insertBefore(injectFirstNode, head.firstChild);
     }
+
+    return () => {
+      const head = document.head;
+      head.removeChild(injectFirstNode);
+    }
   }, [injectFirst]);
 
   return injectFirst ? (

From 74d57e58eaca71b40bab8dd4f5448b2c4314a600 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 11 Dec 2020 16:49:58 +0100
Subject: [PATCH 23/24] prettier

---
 .../src/StylesProvider/StylesProvider.js                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
index b75d99ad54e56b..71f42531e5c0d8 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
@@ -18,7 +18,7 @@ export function StylesProvider(props) {
     return () => {
       const head = document.head;
       head.removeChild(injectFirstNode);
-    }
+    };
   }, [injectFirst]);
 
   return injectFirst ? (

From 5b6f198c9b1f3add44f129527ebbf490495a4f41 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 11 Dec 2020 18:23:15 +0100
Subject: [PATCH 24/24] Update
 packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js

---
 .../src/StylesProvider/StylesProvider.js                         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
index 71f42531e5c0d8..da372ea94400a5 100644
--- a/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.js
@@ -18,6 +18,7 @@ export function StylesProvider(props) {
     return () => {
       const head = document.head;
       head.removeChild(injectFirstNode);
+      injectFirstNode = null;
     };
   }, [injectFirst]);