Skip to content

Instantly share code, notes, and snippets.

@bogdibota
Created Jun 14, 2017
Embed
What would you like to do?
next.js and material-ui
import Layout from '../components/Layout';
export default () => (
<Layout>
<h1>olla</h1>
</Layout>
);
import { Component } from 'react';
import styled from 'styled-components';
import { MuiThemeProvider, getMuiTheme } from 'material-ui/styles';
import injectTapEventPlugin from 'react-tap-event-plugin';
import AppBar from 'material-ui/AppBar';
if (typeof window !== 'undefined') {
injectTapEventPlugin();
}
const Container = styled.section`
background-color: rebeccapurple;
`;
export default class extends Component {
static async getInitialProps({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
return { userAgent };
}
render () {
return (
<MuiThemeProvider muiTheme={getMuiTheme( { userAgent: this.props.userAgent })}>
<Container>
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
/>
{this.props.children}
</Container>
</MuiThemeProvider>
)
}
}
{
"name": "next-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"material-ui": "^0.18.3",
"next": "^3.0.0-beta14",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-tap-event-plugin": "^2.0.1",
"styled-components": "^2.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment