mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
feat: add an example with the next branch of Material-UI (#2036)
This commit is contained in:
Olivier Tassinari
Tim Neutkens
parent
c80fdf3d1c
commit
15e9573ded
29
examples/with-material-ui-next/README.md
Normal file
29
examples/with-material-ui-next/README.md
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-material-ui-next)
|
||||||
|
# Material-UI example
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||||
|
|
||||||
|
```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
|
||||||
|
```
|
||||||
|
|
||||||
|
Install it and run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||||
|
|
||||||
|
```bash
|
||||||
|
now
|
||||||
|
```
|
||||||
|
|
||||||
|
## The idea behind the example
|
||||||
|
|
||||||
|
This example features how you use [material-ui](https://github.com/callemall/material-ui) (Material components that implement Google's Material Design) with Next.js.
|
||||||
|
|
||||||
52
examples/with-material-ui-next/components/App.js
Normal file
52
examples/with-material-ui-next/components/App.js
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
|
||||||
|
import { getDefaultContext } from '../styles/createDefaultContext'
|
||||||
|
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
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 { styleManager, theme } = getDefaultContext()
|
||||||
|
return (
|
||||||
|
<MuiThemeProvider styleManager={styleManager} theme={theme}>
|
||||||
|
<AppWrapper>
|
||||||
|
{this.props.children}
|
||||||
|
</AppWrapper>
|
||||||
|
</MuiThemeProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
children: PropTypes.node.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
13
examples/with-material-ui-next/package.json
Normal file
13
examples/with-material-ui-next/package.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"material-ui": "next",
|
||||||
|
"next": "latest",
|
||||||
|
"react": "^15.5.4",
|
||||||
|
"react-dom": "^15.5.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start"
|
||||||
|
}
|
||||||
|
}
|
||||||
49
examples/with-material-ui-next/pages/_document.js
Normal file
49
examples/with-material-ui-next/pages/_document.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Document, { Head, Main, NextScript } from 'next/document'
|
||||||
|
import { getDefaultContext, setDefaultContext } from '../styles/createDefaultContext'
|
||||||
|
|
||||||
|
export default class MyDocument extends Document {
|
||||||
|
static async getInitialProps (ctx) {
|
||||||
|
setDefaultContext()
|
||||||
|
const page = ctx.renderPage()
|
||||||
|
const styleContext = getDefaultContext()
|
||||||
|
return {
|
||||||
|
...page,
|
||||||
|
styles: (
|
||||||
|
<style id='jss-server-side' type='text/css'>
|
||||||
|
{styleContext.styleManager.sheetsToString()}
|
||||||
|
</style>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const styleContext = getDefaultContext()
|
||||||
|
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={styleContext.theme.palette.primary[500]} />
|
||||||
|
<link
|
||||||
|
rel='stylesheet'
|
||||||
|
href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'
|
||||||
|
/>
|
||||||
|
</Head>
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
64
examples/with-material-ui-next/pages/index.js
Normal file
64
examples/with-material-ui-next/pages/index.js
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
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 App from '../components/App'
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
container: {
|
||||||
|
textAlign: 'center',
|
||||||
|
paddingTop: 200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Index extends Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
open: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleRequestClose = () => {
|
||||||
|
this.setState({
|
||||||
|
open: false
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClick = () => {
|
||||||
|
this.setState({
|
||||||
|
open: true
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<App>
|
||||||
|
<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 primary onClick={this.handleRequestClose}>OK</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
<Typography type='display1' gutterBottom>Material-UI</Typography>
|
||||||
|
<Typography type='subheading' gutterBottom>example project</Typography>
|
||||||
|
<Button raised accent onClick={this.handleClick}>
|
||||||
|
Super Secret Password
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</App>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Index
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
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/styles/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
|
||||||
|
|
@ -27,7 +27,7 @@ const muiTheme = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Main extends Component {
|
class Index extends Component {
|
||||||
static getInitialProps ({ req }) {
|
static getInitialProps ({ req }) {
|
||||||
// Ensures material-ui renders the correct css prefixes server-side
|
// Ensures material-ui renders the correct css prefixes server-side
|
||||||
let userAgent
|
let userAgent
|
||||||
|
|
@ -86,7 +86,7 @@ class Main extends Component {
|
||||||
<h2>example project</h2>
|
<h2>example project</h2>
|
||||||
<RaisedButton
|
<RaisedButton
|
||||||
label='Super Secret Password'
|
label='Super Secret Password'
|
||||||
secondary={Boolean(true)}
|
secondary
|
||||||
onTouchTap={this.handleTouchTap}
|
onTouchTap={this.handleTouchTap}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -95,4 +95,4 @@ class Main extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Main
|
export default Index
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue