profile
viewpoint

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 https://spectrum.chat/next-js or join our Slack community at https://zeit.chat 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,
        },
      })} >
        <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

<!--- 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)
etc

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

zeit/next.js

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.

useful!
source:https://uonfu.com/
answerer
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