Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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,
        },
      })} >
        <Head>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
          <title>{this.computedHeadTitle()}</title>
          <link rel='stylesheet' href='/static/custom.css' />
        </Head>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Typography variant="title" color="inherit" className={classes.flex}>
                <Link href="/">
                  <a className="link-styleless">Cureety</a>
                </Link>
              </Typography>
              <Link href="/help">
                <IconButton
                  aria-haspopup="true"
                  color="inherit"
                  tooltip="Assistance">
                  <Help />
                </IconButton>
              </Link>
            </Toolbar>
          </AppBar>
          <Hidden only={['xs']}>
            {navigationVisible > 0 &&
              <Drawer
                variant="permanent"
                classes={{
                  paper: classes.drawerPaper,
                }}>
                <div className={classes.toolbar} />
                <MenuList>
                  <Link href="/suivi">
                    <MenuItem>
                      <ListItemIcon>
                        <FavoriteIcon />
                      </ListItemIcon>
                      <ListItemText inset primary="Mon suivi" />
                    </MenuItem>
                  </Link>
                  <Link href="/profile">
                    <MenuItem>
                      <ListItemIcon>
                        <PeopleIcon />
                      </ListItemIcon>
                      <ListItemText inset primary="Mon profile" />
                    </MenuItem>
                  </Link>
                </MenuList>
                <Divider />
                <List></List>
              </Drawer>
            }
          </Hidden>

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

const Page = withStyles(styles)(PageComponent)

export default Page

Context

Your Environment

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

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

Issue Analytics

State:
Created 5 years ago
Reactions:32
Comments:21 (9 by maintainers)

Top GitHub Comments

19reactions

Tevinthukucommented, May 18, 2018

Im still getting the same issue. Any recommended fix

10reactions

offerocommented, Feb 22, 2019

I would love to see a write up explaining what is going on with the nextjs example. _app.js, _document.js, and getPageContext.js files are all custom built to make sure Material UI can be themed properly in next.

I’m try to learn next, react, and material-ui and the things that are happening in those files are like magic at the moment.