按照next.js repo：https://github.com/zeit/next.js/tree/v3-beta/examples/with-material-ui
中的示例进行操作我可以让Material-ui为单页工作。我不想做getInitialProps在每个页面上设置userAgent道具。
那么我怎样才能获得一个干净的解决方案来为我的所有页面实现material-ui？
答案 0 :(得分：2)
我遇到了类似的问题，并找到了一个如下所示的解决方案：
// hocs/default-page.js
export default Page => class DefaultPage extends React.Component {
static getInitialProps(ctx) {
// Ensures material-ui renders the correct css prefixes server-side
let userAgent
if (process.browser) {
userAgent = navigator.userAgent
} else {
userAgent = ctx.req.headers['user-agent']
}
// Check if Page has a `getInitialProps`; if so, call it.
const pageProps = Page.getInitialProps && Page.getInitialProps(ctx);
// Return props.
return { ...pageProps, userAgent }
}
...
render() {
return (
<MuiThemeProvider ...>
<Page/>
</MuiThemeProvider>
);
}
}
// pages/index.js
import defaultPage from '../hocs/default-page';
const Page = () => <h1>Hello World</h1>;
Page.getInitialProps = () => { ... };
export default defaultPage(Page);
// Also works for proper components:
export default defaultPage(class MyPage extends React.Component {
static getInitialProps() {
...
}
render() {
...
}
});
答案 1 :(得分：0)
/**
* Created by Counter on 5/30/2017.
*/
import React, {Component} from 'react'
import Head from 'next/head'
import RaisedButton from 'material-ui/RaisedButton'
import Dialog from 'material-ui/Dialog'
import Paper from 'material-ui/Paper';
import FlatButton from 'material-ui/FlatButton'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'
import {blue100, blue400, blue700} from 'material-ui/styles/colors';
import AppBar from 'material-ui/AppBar';
import TextField from 'material-ui/TextField';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
try {
if (typeof window !== 'undefined') {
injectTapEventPlugin()
}
} catch (e) {
// do nothing
}
const styles = {
}
const _muiTheme = getMuiTheme({
palette: {
primary1Color: blue400,
primary2Color: blue700,
primary3Color: blue100,
},
});
class Layout extends Component {
render () {
const { userAgent,children } = this.props
/* https://github.com/callemall/material-ui/issues/3336 */
const muiTheme = getMuiTheme(getMuiTheme({userAgent: userAgent}), _muiTheme)
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<link rel='stylesheet' href='/static/css/react-md.light_blue-yellow.min.css'/>
</Head>
{children}
</div>
</MuiThemeProvider>
)
}
}
export default Layout
import React, {Component} from 'react'
import RaisedButton from 'material-ui/RaisedButton'
import Dialog from 'material-ui/Dialog'
import Paper from 'material-ui/Paper';
import FlatButton from 'material-ui/FlatButton'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'
import {blue100,blue400, blue500, blue700,orange500} from 'material-ui/styles/colors';
import Layout from '../component/layout'
import AppBar from 'material-ui/AppBar';
import TextField from 'material-ui/TextField';
import {Tabs, Tab} from 'material-ui/Tabs';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
try {
if (typeof window !== 'undefined') {
injectTapEventPlugin()
}
} catch (e) {
// do nothing
}
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
contentContainerStyle:{
width:300,
marginTop:133,
float:'left'
},
floatingLabelStyle: {
color: orange500,
},
floatingLabelFocusStyle: {
color: blue500,
},
tabDiv:{
textAlign:'center',
backgroundColor: 'rgb(242, 244, 255);',
boxShadow: '10px 10px 5px #888888',
minHeight:350
},
button: {
margin: 12,
},
descDiv:{
width: '413px',
float: 'left',
margin: '133px 450px 0 25px',
},
outerDiv:{
display:'inline-block'
}
};
const _muiTheme = getMuiTheme({
palette: {
primary1Color: blue400,
primary2Color: blue700,
primary3Color: blue100,
},
});
class Main extends Component {
static getInitialProps ({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
const isServer = !!req
return {isServer, userAgent}
}
constructor (props, context) {
super(props, context);
this.state = {
clicked: false
}
}
render () {
const { userAgent } = this.props;
return(
<Layout userAgent={userAgent} >
<div style={styles.outerDiv}>
<div style={styles.descDiv}>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem </p>
<RaisedButton
target="_blank"
label="Test Your Api"
primary={true}
style={styles.button}
icon=''
/>
</div>
<Tabs
value={this.state.value}
onChange={this.handleChange}
style={styles.contentContainerStyle}
>
<Tab label="Login" value="a">
<div style={styles.tabDiv}>
<TextField
floatingLabelText="Username"
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
/>
<TextField
floatingLabelText="Password"
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
/>
<br/>
<RaisedButton
target="_blank"
label="Submit"
secondary={true}
style={styles.button}
icon=''
/>
</div>
</Tab>
<Tab label="SignUp" value="b">
<div style={styles.tabDiv}>
<TextField
floatingLabelText="Username"
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
/>
<TextField
floatingLabelText="Password"
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
/>
<TextField
floatingLabelText="Confirm Password"
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
/>
<br/>
<RaisedButton
target="_blank"
label="Submit"
secondary={true}
style={styles.button}
icon=''
/>
</div>
</Tab>
</Tabs>
</div>
</Layout>
)
}
}
export default Main