next.js and material-ui

index.js

import Layout from '../components/Layout';

export default () => (
	<Layout>
		<h1>olla</h1>
	</Layout>
);

Layout.js

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>
		)
	}
}

package.json

{
  "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"
  }
}