From ed6f1657949d2c6d2c3dc48a2fe208911c021e31 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 9 Jul 2018 22:28:27 +0200
Subject: [PATCH] [docs] Fix Theme nesting demo in codesandbox (#12097)

---
 .../pages/customization/css-in-js/JssRegistry.js   | 12 ++++++------
 .../customization/overrides/DynamicThemeNesting.js | 14 +++++++-------
 docs/src/pages/customization/themes/Nested.js      | 14 ++++++--------
 docs/src/pages/customization/themes/Palette.js     |  6 ++----
 .../material-ui/src/styles/MuiThemeProvider.js     |  1 -
 5 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/docs/src/pages/customization/css-in-js/JssRegistry.js b/docs/src/pages/customization/css-in-js/JssRegistry.js
index 667b3871aa6dd7..c4dbaf585d68b1 100644
--- a/docs/src/pages/customization/css-in-js/JssRegistry.js
+++ b/docs/src/pages/customization/css-in-js/JssRegistry.js
@@ -46,17 +46,17 @@ class JssRegistry extends React.Component {
 
   render() {
     return (
-      <JssProvider registry={sheetsRegistry}>
-        <MuiThemeProvider theme={theme}>
-          <div>
+      <div>
+        <JssProvider registry={sheetsRegistry}>
+          <MuiThemeProvider theme={theme}>
             <CssInJs />
             <br />
             {'We are collecting all the sheets injected in the DOM.'}
             <br />
             {`The size of the registry is ${this.state.length}.`}
-          </div>
-        </MuiThemeProvider>
-      </JssProvider>
+          </MuiThemeProvider>
+        </JssProvider>
+      </div>
     );
   }
 }
diff --git a/docs/src/pages/customization/overrides/DynamicThemeNesting.js b/docs/src/pages/customization/overrides/DynamicThemeNesting.js
index c6f52faf8676b6..31549373db72a4 100644
--- a/docs/src/pages/customization/overrides/DynamicThemeNesting.js
+++ b/docs/src/pages/customization/overrides/DynamicThemeNesting.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import blue from '@material-ui/core/colors/blue';
 import Switch from '@material-ui/core/Switch';
 
+const defaultTheme = createMuiTheme();
+
 class DynamicThemeNesting extends React.Component {
   state = {
     color: 'default',
@@ -29,21 +31,19 @@ class DynamicThemeNesting extends React.Component {
           label="Blue"
         />
         <MuiThemeProvider
-          theme={theme =>
+          theme={
             this.state.color === 'blue'
               ? {
-                  ...theme,
+                  ...defaultTheme,
                   palette: {
-                    ...theme.palette,
+                    ...defaultTheme.palette,
                     secondary: {
-                      light: blue[300],
                       main: blue[500],
-                      dark: blue[700],
                       contrastText: '#fff',
                     },
                   },
                 }
-              : theme
+              : defaultTheme
           }
         >
           <Button variant="raised" color="secondary">
diff --git a/docs/src/pages/customization/themes/Nested.js b/docs/src/pages/customization/themes/Nested.js
index fa4638435c4480..7fb454ba514932 100644
--- a/docs/src/pages/customization/themes/Nested.js
+++ b/docs/src/pages/customization/themes/Nested.js
@@ -54,15 +54,13 @@ const theme3 = outerTheme => ({
 function Nested() {
   return (
     <MuiThemeProvider theme={theme1}>
-      <div>
+      <NestedCheckbox />
+      <MuiThemeProvider theme={theme2}>
         <NestedCheckbox />
-        <MuiThemeProvider theme={theme2}>
-          <NestedCheckbox />
-        </MuiThemeProvider>
-        <MuiThemeProvider theme={theme3}>
-          <NestedCheckbox />
-        </MuiThemeProvider>
-      </div>
+      </MuiThemeProvider>
+      <MuiThemeProvider theme={theme3}>
+        <NestedCheckbox />
+      </MuiThemeProvider>
     </MuiThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/themes/Palette.js b/docs/src/pages/customization/themes/Palette.js
index 1663e949834229..548d6d85bd7d83 100644
--- a/docs/src/pages/customization/themes/Palette.js
+++ b/docs/src/pages/customization/themes/Palette.js
@@ -13,10 +13,8 @@ const theme = createMuiTheme({
 function Palette() {
   return (
     <MuiThemeProvider theme={theme}>
-      <div>
-        <Button color="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
-      </div>
+      <Button color="primary">Primary</Button>
+      <Button color="secondary">Secondary</Button>
     </MuiThemeProvider>
   );
 }
diff --git a/packages/material-ui/src/styles/MuiThemeProvider.js b/packages/material-ui/src/styles/MuiThemeProvider.js
index bd585729d0143e..1a9986827aacdb 100644
--- a/packages/material-ui/src/styles/MuiThemeProvider.js
+++ b/packages/material-ui/src/styles/MuiThemeProvider.js
@@ -77,7 +77,6 @@ class MuiThemeProvider extends React.Component {
           'Material-UI: you are providing a theme function property ' +
             'to the MuiThemeProvider component:',
           '<MuiThemeProvider theme={outerTheme => outerTheme} />',
-          '',
           'However, no outer theme is present.',
           'Make sure a theme is already injected higher in the React tree ' +
             'or provide a theme object.',