terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Update material-ui example (#2630)

Browse source
This commit is contained in:
Olivier Tassinari 2017-07-24 06:39:36 +02:00 committed by Tim Neutkens
parent 06d42b99ec
commit c84bf2ea32
5 changed files with 71 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
examples/with-material-ui-next/components/App.js
View file

@ -1,21 +1,19 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { JssProvider } from 'react-jss'
import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles' import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
import { getDefaultContext } from '../styles/createDefaultContext' import { getContext } from '../styles/context'
// Apply some reset
const styleSheet = createStyleSheet('App', theme => ({ const styleSheet = createStyleSheet('App', theme => ({
'@global': { '@global': {
html: { html: {
background: theme.palette.background.default, background: theme.palette.background.default,
fontFamily: theme.typography.fontFamily,
WebkitFontSmoothing: 'antialiased', // Antialiasing. WebkitFontSmoothing: 'antialiased', // Antialiasing.
MozOsxFontSmoothing: 'grayscale' // Antialiasing. MozOsxFontSmoothing: 'grayscale' // Antialiasing.
}, },
body: { body: {
margin: 0 margin: 0
},
a: {
color: 'inherit'
} }
} }
})) }))
@ -34,13 +32,16 @@ class App extends Component {
} }
render () { render () {
const { styleManager, theme } = getDefaultContext() const context = getContext()
return ( return (
<MuiThemeProvider styleManager={styleManager} theme={theme}> <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
<MuiThemeProvider theme={context.theme} sheetsManager={context.sheetsManager}>
<AppWrapper> <AppWrapper>
{this.props.children} {this.props.children}
</AppWrapper> </AppWrapper>
</MuiThemeProvider> </MuiThemeProvider>
</JssProvider>
) )
} }
} }

3
examples/with-material-ui-next/package.json
View file

@ -5,7 +5,8 @@
"material-ui": "next", "material-ui": "next",
"next": "latest", "next": "latest",
"react": "^15.5.4", "react": "^15.5.4",
"react-dom": "^15.5.4" "react-dom": "^15.5.4",
"react-jss": "^7.0.2"
}, },
"scripts": { "scripts": {
"dev": "next", "dev": "next",

14
examples/with-material-ui-next/pages/_document.js
View file

@ -1,20 +1,22 @@
import React from 'react' import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
import { getDefaultContext, setDefaultContext } from '../styles/createDefaultContext' import { getContext, setContext } from '../styles/context'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps (ctx) { static async getInitialProps (ctx) {
setDefaultContext() // Reset the context for handling a new request.
setContext()
const page = ctx.renderPage() const page = ctx.renderPage()
const styleContext = getDefaultContext() // Get the context with the collected side effects.
const context = getContext()
return { return {
...page, ...page,
styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: styleContext.styleManager.sheetsToString() }} /> styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: context.sheetsRegistry.toString() }} />
} }
} }
render () { render () {
const styleContext = getDefaultContext() const context = getContext()
return ( return (
<html lang='en'> <html lang='en'>
<Head> <Head>
@ -29,7 +31,7 @@ export default class MyDocument extends Document {
} }
/> />
{/* PWA primary color */} {/* PWA primary color */}
<meta name='theme-color' content={styleContext.theme.palette.primary[500]} /> <meta name='theme-color' content={context.theme.palette.primary[500]} />
<link <link
rel='stylesheet' rel='stylesheet'
href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'

49
examples/with-material-ui-next/styles/context.js Normal file
View file

@ -0,0 +1,49 @@
import { create } from 'jss'
import preset from 'jss-preset-default'
import { SheetsRegistry } from 'react-jss'
import createPalette from 'material-ui/styles/palette'
import createMuiTheme from 'material-ui/styles/theme'
import { purple, green } from 'material-ui/colors'
import createGenerateClassName from 'material-ui/styles/createGenerateClassName'
const theme = createMuiTheme({
palette: createPalette({
primary: purple,
accent: green
})
})
// Configure JSS
const jss = create(preset())
jss.options.createGenerateClassName = createGenerateClassName
function createContext () {
return {
jss,
theme,
// This is needed in order to deduplicate the injection of CSS in the page.
sheetsManager: new WeakMap(),
// This is needed in order to inject the critical CSS.
sheetsRegistry: new SheetsRegistry()
}
}
export function setContext () {
// Singleton hack as there is no way to pass variables from _document.js to pages yet.
global.__INIT_MATERIAL_UI__ = createContext()
}
export function getContext () {
// Make sure to create a new store for every server-side request so that data
// isn't shared between connections (which would be bad)
if (!process.browser) {
return global.__INIT_MATERIAL_UI__
}
// Reuse context on the client-side
if (!global.__INIT_MATERIAL_UI__) {
global.__INIT_MATERIAL_UI__ = createContext()
}
return global.__INIT_MATERIAL_UI__
}

38
examples/with-material-ui-next/styles/createDefaultContext.js
View file

@ -1,38 +0,0 @@
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import createPalette from 'material-ui/styles/palette'
import createMuiTheme from 'material-ui/styles/theme'
import { purple, green } from 'material-ui/colors'
const createDefaultContext = () =>
MuiThemeProvider.createDefaultContext({
theme: createMuiTheme({
palette: createPalette({
primary: purple,
accent: green
})
})
})
// Singleton hack as there is no way to pass variables from _document.js to pages yet.
let context = null
export function setDefaultContext () {
context = createDefaultContext()
}
export function getDefaultContext () {
// Make sure to create a new store for every server-side request so that data
// isn't shared between connections (which would be bad)
if (!process.browser) {
return context
}
// Reuse store on the client-side
if (!context) {
context = createDefaultContext()
}
return context
}
export default createDefaultContext