[examples] Wrap entire app with Styletron provider for with-styletron (#21908)

examples/with-styletron/package.json

@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "styletron-engine-atomic": "^1.1.2",
-    "styletron-react": "^5.0.1"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "styletron-engine-atomic": "1.4.6",
+    "styletron-react": "5.2.7"
   },
   "license": "MIT"
 }

examples/with-styletron/pages/_document.js

@@ -3,14 +3,22 @@ import { Provider as StyletronProvider } from 'styletron-react'
 import { styletron } from '../styletron'
 
 class MyDocument extends Document {
-  static getInitialProps(props) {
-    const page = props.renderPage((App) => (props) => (
-      <StyletronProvider value={styletron}>
-        <App {...props} />
-      </StyletronProvider>
-    ))
+  static async getInitialProps(context) {
+    const renderPage = () =>
+      context.renderPage({
+        enhanceApp: (App) => (props) => (
+          <StyletronProvider value={styletron}>
+            <App {...props} />
+          </StyletronProvider>
+        ),
+      })
+
+    const initialProps = await Document.getInitialProps({
+      ...context,
+      renderPage,
+    })
     const stylesheets = styletron.getStylesheets() || []
-    return { ...page, stylesheets }
+    return { ...initialProps, stylesheets }
   }
 
   render() {