diff --git a/examples/with-styletron/layout.js b/examples/with-styletron/layout.js
deleted file mode 100644
index 9fe974aa..00000000
--- a/examples/with-styletron/layout.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { StyletronProvider } from 'styletron-react'
-import getStyletron from './styletron'
-
-export default ({ children }) => (
-
- {children}
-
-)
diff --git a/examples/with-styletron/package.json b/examples/with-styletron/package.json
index 488a3ca0..e7320d2a 100644
--- a/examples/with-styletron/package.json
+++ b/examples/with-styletron/package.json
@@ -10,8 +10,8 @@
"next": "latest",
"react": "^16.0.0",
"react-dom": "^16.0.0",
- "styletron-client": "^2.2.0",
- "styletron-react": "^2.2.1",
- "styletron-server": "^2.2.0"
+ "styletron": "^3.0.4",
+ "styletron-engine-atomic": "^1.0.8",
+ "styletron-react": "^4.3.5"
}
}
diff --git a/examples/with-styletron/pages/_app.js b/examples/with-styletron/pages/_app.js
new file mode 100644
index 00000000..848b543e
--- /dev/null
+++ b/examples/with-styletron/pages/_app.js
@@ -0,0 +1,19 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import { Provider as StyletronProvider } from 'styletron-react'
+import getStyletron from '../styletron'
+
+class MyApp extends App {
+ render () {
+ const { Component } = this.props
+ return (
+
+
+
+
+
+ )
+ }
+}
+
+export default MyApp
diff --git a/examples/with-styletron/pages/_document.js b/examples/with-styletron/pages/_document.js
index 492fee1c..e81f0a29 100644
--- a/examples/with-styletron/pages/_document.js
+++ b/examples/with-styletron/pages/_document.js
@@ -17,7 +17,7 @@ export default class MyDocument extends Document {
))}
diff --git a/examples/with-styletron/pages/index.js b/examples/with-styletron/pages/index.js
index 97de34ee..03b6697a 100644
--- a/examples/with-styletron/pages/index.js
+++ b/examples/with-styletron/pages/index.js
@@ -1,5 +1,4 @@
import { styled } from 'styletron-react'
-import Page from '../layout'
const Title = styled('div', {
color: 'red',
@@ -7,7 +6,7 @@ const Title = styled('div', {
})
export default () => (
-
+
My page
-
+
)
diff --git a/examples/with-styletron/styletron.js b/examples/with-styletron/styletron.js
index 017f7c68..9c975fad 100644
--- a/examples/with-styletron/styletron.js
+++ b/examples/with-styletron/styletron.js
@@ -1,18 +1,16 @@
-
const isServer = typeof window === 'undefined'
let styletron
export default function getStyletron () {
- if (isServer) {
- const Styletron = require('styletron-server')
+ if (isServer && !styletron) {
+ const Styletron = require('styletron-engine-atomic').Server
styletron = new Styletron()
} else if (!styletron) {
- const Styletron = require('styletron-client')
+ const Styletron = require('styletron-engine-atomic').Client
const styleElements = document.getElementsByClassName('_styletron_hydrate_')
styletron = new Styletron(styleElements)
}
-
return styletron
}