[docs] Fix Theme nesting demo in codesandbox (#12097)

mui · Jul 9, 2018 · ed6f165 · ed6f165
1 parent d205e2d
commit ed6f165
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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.',