mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Update material-ui example (#2630)
This commit is contained in:
Olivier Tassinari
Tim Neutkens
parent
06d42b99ec
commit
c84bf2ea32
|
|
@ -1,21 +1,19 @@
|
|||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { JssProvider } from 'react-jss'
|
||||
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 => ({
|
||||
'@global': {
|
||||
html: {
|
||||
background: theme.palette.background.default,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
WebkitFontSmoothing: 'antialiased', // Antialiasing.
|
||||
MozOsxFontSmoothing: 'grayscale' // Antialiasing.
|
||||
},
|
||||
body: {
|
||||
margin: 0
|
||||
},
|
||||
a: {
|
||||
color: 'inherit'
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
|
@ -34,13 +32,16 @@ class App extends Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { styleManager, theme } = getDefaultContext()
|
||||
const context = getContext()
|
||||
|
||||
return (
|
||||
<MuiThemeProvider styleManager={styleManager} theme={theme}>
|
||||
<AppWrapper>
|
||||
{this.props.children}
|
||||
</AppWrapper>
|
||||
</MuiThemeProvider>
|
||||
<JssProvider registry={context.sheetsRegistry} jss={context.jss}>
|
||||
<MuiThemeProvider theme={context.theme} sheetsManager={context.sheetsManager}>
|
||||
<AppWrapper>
|
||||
{this.props.children}
|
||||
</AppWrapper>
|
||||
</MuiThemeProvider>
|
||||
</JssProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
"material-ui": "next",
|
||||
"next": "latest",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4"
|
||||
"react-dom": "^15.5.4",
|
||||
"react-jss": "^7.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
import React from 'react'
|
||||
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 {
|
||||
static async getInitialProps (ctx) {
|
||||
setDefaultContext()
|
||||
// Reset the context for handling a new request.
|
||||
setContext()
|
||||
const page = ctx.renderPage()
|
||||
const styleContext = getDefaultContext()
|
||||
// Get the context with the collected side effects.
|
||||
const context = getContext()
|
||||
return {
|
||||
...page,
|
||||
styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: styleContext.styleManager.sheetsToString() }} />
|
||||
styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: context.sheetsRegistry.toString() }} />
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const styleContext = getDefaultContext()
|
||||
const context = getContext()
|
||||
return (
|
||||
<html lang='en'>
|
||||
<Head>
|
||||
|
|
@ -29,7 +31,7 @@ export default class MyDocument extends Document {
|
|||
}
|
||||
/>
|
||||
{/* PWA primary color */}
|
||||
<meta name='theme-color' content={styleContext.theme.palette.primary[500]} />
|
||||
<meta name='theme-color' content={context.theme.palette.primary[500]} />
|
||||
<link
|
||||
rel='stylesheet'
|
||||
href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'
|
||||
|
|
|
|||
49
examples/with-material-ui-next/styles/context.js
Normal file
49
examples/with-material-ui-next/styles/context.js
Normal 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__
|
||||
}
|
||||
|
|
@ -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
|
||||
Loading…
Reference in a new issue