From 945c1fac9fce95cb49ad759062f0766e00e120fb Mon Sep 17 00:00:00 2001
From: David Sally <davidcsally@gmail.com>
Date: Fri, 1 May 2020 22:15:02 -0700
Subject: [PATCH] Update with-emotion-11 example to use functional _app
 component (#12183)

---
 examples/with-emotion-11/pages/_app.js | 34 +++++++++++++++++---------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/examples/with-emotion-11/pages/_app.js b/examples/with-emotion-11/pages/_app.js
index 8db2357327..4999ec025d 100644
--- a/examples/with-emotion-11/pages/_app.js
+++ b/examples/with-emotion-11/pages/_app.js
@@ -1,17 +1,29 @@
+// import App from 'next/app'
 import * as React from 'react'
-import NextApp from 'next/app'
 import { CacheProvider } from '@emotion/react'
 import { cache } from '@emotion/css'
 import { globalStyles } from '../shared/styles'
 
-export default class App extends NextApp {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <CacheProvider value={cache}>
-        {globalStyles}
-        <Component {...pageProps} />
-      </CacheProvider>
-    )
-  }
+// see: https://nextjs.org/docs/advanced-features/custom-app
+function MyApp({ Component, pageProps }) {
+  return (
+    <CacheProvider value={cache}>
+      {globalStyles}
+      <Component {...pageProps} />
+    </CacheProvider>
+  )
 }
+
+// Only uncomment this method if you have blocking data requirements for
+// every single page in your application. This disables the ability to
+// perform automatic static optimization, causing every page in your app to
+// be server-side rendered.
+//
+// MyApp.getInitialProps = async appContext => {
+//   // calls page's `getInitialProps` and fills `appProps.pageProps`
+//   const appProps = await App.getInitialProps(appContext)
+
+//   return { ...appProps }
+// }
+
+export default MyApp