mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
docs(material-ui): move the source code to Material-UI repository (#2808)
This commit is contained in:
Olivier Tassinari
Tim Neutkens
parent
ccc9ff2201
commit
232ba01f84
|
|
@ -1,13 +1,13 @@
|
|||
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-material-ui-next)
|
||||
[](https://deploy.now.sh/?repo=https://github.com/callemall/material-ui/tree/v1-beta/examples/nextjs)
|
||||
# Material-UI example
|
||||
|
||||
## How to use
|
||||
|
||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||
Download the example [or clone the repo](https://github.com/callemall/material-ui):
|
||||
|
||||
```bash
|
||||
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-material-ui-next
|
||||
cd with-material-ui-next
|
||||
curl https://codeload.github.com/callemall/material-ui/tar.gz/v1-beta | tar -xz --strip=2 material-ui-1-beta/examples/nextjs
|
||||
cd nextjs
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
|
@ -25,5 +25,7 @@ now
|
|||
|
||||
## The idea behind the example
|
||||
|
||||
[material-ui](https://github.com/callemall/material-ui) is being rewritten from scratch on the [next branch](https://material-ui-1dab0.firebaseapp.com/). This example shows how you use it with Next.js.
|
||||
[material-ui](https://github.com/callemall/material-ui) is being rewritten from scratch on the [v1-beta branch](https://material-ui-1dab0.firebaseapp.com/).
|
||||
This example shows how you use it with Next.js.
|
||||
|
||||
:warning: The source code [is hosted](https://github.com/callemall/material-ui/tree/v1-beta/examples/nextjs) on the Material-UI repository.
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
import React, { Component } from 'react'
|
||||
import { JssProvider } from 'react-jss'
|
||||
import { withStyles, MuiThemeProvider } from 'material-ui/styles'
|
||||
import { getContext } from '../styles/context'
|
||||
|
||||
// Apply some reset
|
||||
const styleSheet = 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 (
|
||||
<JssProvider registry={context.sheetsRegistry} jss={context.jss}>
|
||||
<MuiThemeProvider theme={context.theme} sheetsManager={context.sheetsManager}>
|
||||
<AppWrapper>
|
||||
<BaseComponent {...this.props} />
|
||||
</AppWrapper>
|
||||
</MuiThemeProvider>
|
||||
</JssProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
WithRoot.displayName = `withRoot(${BaseComponent.displayName})`
|
||||
|
||||
return WithRoot
|
||||
}
|
||||
|
||||
export default withRoot
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"name": "with-material-ui-next",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"material-ui": "next",
|
||||
"next": "latest",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
"react-jss": "^7.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import React from 'react'
|
||||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
import { getContext, setContext } from '../styles/context'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static async getInitialProps (ctx) {
|
||||
// Reset the context for handling a new request.
|
||||
setContext()
|
||||
const page = ctx.renderPage()
|
||||
// Get the context with the collected side effects.
|
||||
const context = getContext()
|
||||
return {
|
||||
...page,
|
||||
styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: context.sheetsRegistry.toString() }} />
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const context = getContext()
|
||||
return (
|
||||
<html lang='en'>
|
||||
<Head>
|
||||
<title>My page</title>
|
||||
<meta charSet='utf-8' />
|
||||
{/* Use minimum-scale=1 to enable GPU rasterization */}
|
||||
<meta
|
||||
name='viewport'
|
||||
content={
|
||||
'user-scalable=0, initial-scale=1, maximum-scale=1, ' +
|
||||
'minimum-scale=1, width=device-width, height=device-height'
|
||||
}
|
||||
/>
|
||||
{/* PWA primary color */}
|
||||
<meta name='theme-color' content={context.theme.palette.primary[500]} />
|
||||
<link
|
||||
rel='stylesheet'
|
||||
href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import React, {Component} from 'react'
|
||||
import Button from 'material-ui/Button'
|
||||
import Dialog, {
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions
|
||||
} from 'material-ui/Dialog'
|
||||
import Typography from 'material-ui/Typography'
|
||||
import withRoot from '../components/withRoot'
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
paddingTop: 200
|
||||
}
|
||||
}
|
||||
|
||||
class Index extends Component {
|
||||
state = {
|
||||
open: false
|
||||
};
|
||||
|
||||
handleRequestClose = () => {
|
||||
this.setState({
|
||||
open: false
|
||||
})
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.setState({
|
||||
open: true
|
||||
})
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
|
||||
<DialogTitle>Super Secret Password</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>1-2-3-4-5</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button color='primary' onClick={this.handleRequestClose}>OK</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Typography type='display1' gutterBottom>Material-UI</Typography>
|
||||
<Typography type='subheading' gutterBottom>example project</Typography>
|
||||
<Button raised color='accent' onClick={this.handleClick}>
|
||||
Super Secret Password
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withRoot(Index)
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
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__
|
||||
}
|
||||
Loading…
Reference in a new issue