[examples] update to use passed cache

mui · Jul 24, 2021 · 9b1a2d0 · 9b1a2d0
1 parent 8fa3533
commit 9b1a2d0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/examples/nextjs/pages/_app.js b/examples/nextjs/pages/_app.js
@@ -8,14 +8,13 @@ import theme from '../src/theme';
 import createEmotionCache from '../src/createEmotionCache';
 
 // Client-side cache, shared for the whole session of the user in the browser.
-const cache = createEmotionCache();
+const clientSideEmotionCache = createEmotionCache();
 
 export default function MyApp(props) {
-  const { Component, disableEmotionCache = false, pageProps } = props;
-  const Wrapper = disableEmotionCache ? React.Fragment : CacheProvider;
-  const wrapperProps = disableEmotionCache ? {} : { value: cache };
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+
   return (
-    <Wrapper {...wrapperProps}>
+    <CacheProvider value={emotionCache}>
       <Head>
         <title>My page</title>
         <meta name="viewport" content="initial-scale=1, width=device-width" />
@@ -25,12 +24,12 @@ export default function MyApp(props) {
         <CssBaseline />
         <Component {...pageProps} />
       </ThemeProvider>
-    </Wrapper>
+    </CacheProvider>
   );
 }
 
 MyApp.propTypes = {
   Component: PropTypes.elementType.isRequired,
-  disableEmotionCache: PropTypes.bool,
+  emotionCache: PropTypes.object.isRequired,
   pageProps: PropTypes.object.isRequired,
 };
diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
@@ -64,7 +64,7 @@ MyDocument.getInitialProps = async (ctx) => {
       enhanceApp: (App) => (props) =>
         (
           <CacheProvider value={cache}>
-            <App disableEmotionCache {...props} />
+            <App emotionCache={cache} {...props} />
           </CacheProvider>
         ),
     });