title: React + Material-UI - Warning: Prop className did not match
body: <p>I'm having difficulty with differences between client-side and server-side rendering of styles in Material-UI components due to classNames being assigned differently.</p>
  
  <p>The classNames are assigned correctly on first loading the page, but after refreshing the page, the classNames no longer match so the component loses its styling. This is the error message I am receiving on the Console:</p>
  
  <blockquote>
    <p>Warning: Prop <code>className</code> did not match. 
    Server: "MuiFormControl-root-3 MuiFormControl-marginNormal-4
    <strong>SearchBar-textField-31</strong>" 
    Client: "MuiFormControl-root-3 MuiFormControl-marginNormal-4
    <strong>SearchBar-textField-2</strong>"</p>
  </blockquote>
  
  <p>I've followed the Material-UI TextField <a href="https://material-ui.com/demos/text-fields/" rel="noreferrer">example docs</a>, and their accompanying <a href="https://codesandbox.io/s/2012x8202y" rel="noreferrer">Code Sandbox example</a>, but I can't seem to figure out what is causing the difference between the server and client classNames.</p>
  
  <p>I experienced a similar issue when adding Material-UI Chips with a delete 'x' icon. The 'x' icon rendered with a monstrous 1024px width after refreshing. The same underlying issue being that icon was not receiving the correct class for styling.</p>
  
  <p>There are a few questions on Stack Overflow addressing why the client and server might render classNames differently (e.g. need to upgrade to @Material-UI/core version ^1.0.0, using a custom server.js, and using Math.random in setState), but none of these apply in my case.</p>
  
  <p>I don't know enough to tell whether <a href="https://github.com/mui-org/material-ui/issues/7836" rel="noreferrer">this Github discussion</a> might help, but likely not since they were using a beta version of Material-UI.</p>
  
  <h1>Minimal steps to reproduce:</h1>
  
  <p>Create project folder and start Node server:</p>
  
  <pre><code>mkdir app
  cd app
  npm init -y
  npm install react react-dom next @material-ui/core
  npm run dev
  </code></pre>
  
  <h3>edit package.json:</h3>
  
  <p>Add to 'scripts': <code>"dev": "next",</code></p>
  
  <h3>app/pages/index.jsx:</h3>
  
  <pre><code>import Head from "next/head"
  import CssBaseline from "@material-ui/core/CssBaseline"
  import SearchBar from "../components/SearchBar"
  
  const Index = () =&gt; (
    &lt;React.Fragment&gt;
      &lt;Head&gt;
        &lt;link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
        /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
        &lt;meta charSet="utf-8" /&gt;
      &lt;/Head&gt;
      &lt;CssBaseline /&gt;
      &lt;SearchBar /&gt;
    &lt;/React.Fragment&gt;
  )
  
  export default Index
  </code></pre>
  
  <h3>app/components/SearchBar.jsx:</h3>
  
  <pre><code>import PropTypes from "prop-types"
  import { withStyles } from "@material-ui/core/styles"
  import TextField from "@material-ui/core/TextField"
  
  const styles = (theme) =&gt; ({
    container: {
      display: "flex",
      flexWrap: "wrap",
    },
    textField: {
      margin: theme.spacing.unit / 2,
      width: 200,
      border: "2px solid red",
    },
  })
  
  class SearchBar extends React.Component {
    constructor(props) {
      super(props)
      this.state = { value: "" }
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    handleChange(event) {
      this.setState({ value: event.target.value })
    }
  
    handleSubmit(event) {
      event.preventDefault()
    }
  
    render() {
      const { classes } = this.props
      return (
        &lt;form
          className={classes.container}
          noValidate
          autoComplete="off"
          onSubmit={this.handleSubmit}
        &gt;
          &lt;TextField
            id="search"
            label="Search"
            type="search"
            placeholder="Search..."
            className={classes.textField}
            value={this.state.value}
            onChange={this.handleChange}
            margin="normal"
          /&gt;
        &lt;/form&gt;
      )
    }
  }
  
  SearchBar.propTypes = {
    classes: PropTypes.object.isRequired,
  }
  
  export default withStyles(styles)(SearchBar)
  </code></pre>
  
  <p>Visit page in browser <code>localhost:3000</code> and see this:</p>
  
  <p><a href="https://i.stack.imgur.com/Nm4Ww.png" rel="noreferrer">red border around TextField component</a></p>
  
  <p>Refresh the browser and see this:</p>
  
  <p><a href="https://i.stack.imgur.com/a2I7y.png" rel="noreferrer">TextField component's styles are gone</a></p>
  
  <p>Notice that the red border around TextField disappears.</p>
  
  <h1>Relevant Libs:</h1>
  
  <ul>
  <li>"react": 16.4.0</li>
  <li>"react-dom": 16.4.0</li>
  <li>"next": 6.0.3</li>
  <li>"@material-ui/core": 1.2.0</li>
  </ul>