Ask questionsUsing Material UI + NextJS: "Prop did not match. Server: Client:"

<!--- Provide a general summary of the issue in the Title above -->

<!-- ⚠️ IMPORTANT ⚠️ If you have a question about Next.js please ask it on Spectrum or join our Slack community at and ask it in the #next channel -->

<!-- Thank you very much for contributing to Next.js by creating an issue! ❤️ To avoid duplicate issues we ask you to check off the following list -->

Expected Behavior

Works without problem.

Current Behavior

Errors with "material-ui": "^1.0.0-beta.44" and "next": "^6.0.0" tried a lot of configuration with .babelrc doesn't work as expected. When I'm using material-ui component MuiThemeProvider and refresh page using browser refresh not all component are rendered properly and in console there is next warning: Warning: Prop 'className' did not match. Server: "MuiTypography-root-246 MuiTypography-title-252 MuiTypography-colorInherit-265 PageComponent-flex-207" Client: "MuiTypography-root-44 MuiTypography-title-50 MuiTypography-colorInherit-63 PageComponent-flex-5"

Steps to Reproduce (for bugs)

Page component wich is container for whole app:

import React from 'react'
import PropTypes from 'prop-types'
import Head from 'next/head'
import Document from 'next/document'
import NavigationBottom from './navigation/bottom'
import { MuiThemeProvider, createMuiTheme, withStyles } from 'material-ui/styles'
import { Hidden } from 'material-ui'

import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'
import IconButton from 'material-ui/IconButton'
import Link from 'next/link'
import Drawer from 'material-ui/Drawer'
import Divider from 'material-ui/Divider'
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import { inherits } from 'util'

import { MenuList, MenuItem } from 'material-ui/Menu';
import PeopleIcon from '@material-ui/icons/People'
import FavoriteIcon from '@material-ui/icons/Favorite'
import Help from '@material-ui/icons/Help'
import blue from 'material-ui/colors/blue';

const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#32be9e'

const drawerWidth = 210

const styles = theme => ({
  root: {
    flexGrow: 1,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#32be9e',
    backgroundColor: 'white'
  drawerPaper: {
    position: 'relative',
    width: drawerWidth,
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
    minWidth: 0, // So the Typography noWrap works
  flex: {
    flex: 1
  toolbar: theme.mixins.toolbar,

class PageComponent extends Document {
  static propTypes = {
    isServer: PropTypes.bool,
    title: PropTypes.string.isRequired,
    children: PropTypes.element.isRequired,
    classes: PropTypes.object.isRequired

  static defaultProps = {
    navigationVisible: true

  computedHeadTitle() {
    return this.props.title ? `${this.props.title} | Cureety` : 'Cureety'

  render() {
    let { classes, navigationVisible } = this.props
    return (
      <MuiThemeProvider theme={createMuiTheme({
        palette: {
          primary: blue,
      })} >
          <link rel="stylesheet" href=",400,500" />
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
          <link rel='stylesheet' href='/static/custom.css' />
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
              <Typography variant="title" color="inherit" className={classes.flex}>
                <Link href="/">
                  <a className="link-styleless">Cureety</a>
              <Link href="/help">
                  <Help />
          <Hidden only={['xs']}>
            {navigationVisible > 0 &&
                  paper: classes.drawerPaper,
                <div className={classes.toolbar} />
                  <Link href="/suivi">
                        <FavoriteIcon />
                      <ListItemText inset primary="Mon suivi" />
                  <Link href="/profile">
                        <PeopleIcon />
                      <ListItemText inset primary="Mon profile" />
                <Divider />

          <main className={classes.content}>
            <div className={classes.toolbar} />
            <Typography noWrap component="div">
          {navigationVisible > 0 &&
            <Hidden only={['sm', 'md', 'lg', 'xl']}>
              <NavigationBottom />

const Page = withStyles(styles)(PageComponent)

export default Page


<!--- How has this issue affected you? What are you trying to accomplish? --> <!--- Providing context helps us come up with a solution that is most useful in the real world -->

Your Environment

<!--- Include as many relevant details about the environment you experienced the bug in -->

Tech Version
next ^6.0.0
node v8.9.3
OS Windows 10
browser Chrome Version 66.0.3359.139 (Build officiel) (64 bits)

Connected issue, said to move question to another issue: #3983


Answer questions ghost

@offero I personally wish we could wrap all the logic in a plugin so people don't have to worry about it.

Deleted user ghost Nothing to see here, move along. Hi, I'm @ghost! I take the place of user accounts that have been deleted. :ghost:
Github User Rank List