diff --git a/examples/with-material-ui-next/components/App.js b/examples/with-material-ui-next/components/App.js
deleted file mode 100644
index ddb582a2..00000000
--- a/examples/with-material-ui-next/components/App.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { JssProvider } from 'react-jss'
-import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
-import { getContext } from '../styles/context'
-
-// Apply some reset
-const styleSheet = createStyleSheet('App', theme => ({
- '@global': {
- html: {
- background: theme.palette.background.default,
- WebkitFontSmoothing: 'antialiased', // Antialiasing.
- MozOsxFontSmoothing: 'grayscale' // Antialiasing.
- },
- body: {
- margin: 0
- }
- }
-}))
-
-let AppWrapper = props => props.children
-
-AppWrapper = withStyles(styleSheet)(AppWrapper)
-
-class App extends Component {
- componentDidMount () {
- // Remove the server-side injected CSS.
- const jssStyles = document.querySelector('#jss-server-side')
- if (jssStyles && jssStyles.parentNode) {
- jssStyles.parentNode.removeChild(jssStyles)
- }
- }
-
- render () {
- const context = getContext()
-
- return (
-
-
-
- {this.props.children}
-
-
-
- )
- }
-}
-
-App.propTypes = {
- children: PropTypes.node.isRequired
-}
-
-export default App
diff --git a/examples/with-material-ui-next/components/withRoot.js b/examples/with-material-ui-next/components/withRoot.js
new file mode 100644
index 00000000..85a29bfa
--- /dev/null
+++ b/examples/with-material-ui-next/components/withRoot.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import { JssProvider } from 'react-jss'
+import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
+import { getContext } from '../styles/context'
+
+// Apply some reset
+const styleSheet = createStyleSheet(theme => ({
+ '@global': {
+ html: {
+ background: theme.palette.background.default,
+ WebkitFontSmoothing: 'antialiased', // Antialiasing.
+ MozOsxFontSmoothing: 'grayscale' // Antialiasing.
+ },
+ body: {
+ margin: 0
+ }
+ }
+}))
+
+let AppWrapper = props => props.children
+
+AppWrapper = withStyles(styleSheet)(AppWrapper)
+
+function withRoot (BaseComponent) {
+ class WithRoot extends Component {
+ static getInitialProps (ctx) {
+ if (BaseComponent.getInitialProps) {
+ return BaseComponent.getInitialProps(ctx)
+ }
+
+ return {}
+ }
+
+ componentDidMount () {
+ // Remove the server-side injected CSS.
+ const jssStyles = document.querySelector('#jss-server-side')
+ if (jssStyles && jssStyles.parentNode) {
+ jssStyles.parentNode.removeChild(jssStyles)
+ }
+ }
+
+ render () {
+ const context = getContext()
+
+ return (
+
+
+
+
+
+
+
+ )
+ }
+ }
+
+ WithRoot.displayName = `withRoot(${BaseComponent.displayName})`
+
+ return WithRoot
+}
+
+export default withRoot
diff --git a/examples/with-material-ui-next/pages/index.js b/examples/with-material-ui-next/pages/index.js
index 0c5ed172..09068a6c 100644
--- a/examples/with-material-ui-next/pages/index.js
+++ b/examples/with-material-ui-next/pages/index.js
@@ -7,7 +7,7 @@ import Dialog, {
DialogActions
} from 'material-ui/Dialog'
import Typography from 'material-ui/Typography'
-import App from '../components/App'
+import withRoot from '../components/withRoot'
const styles = {
container: {
@@ -35,26 +35,24 @@ class Index extends Component {
render () {
return (
-
-
-
- Material-UI
- example project
-
-
-
+
+
+ Material-UI
+ example project
+
+
)
}
}
-export default Index
+export default withRoot(Index)