I&#39;m having difficulty with differences between client-side and server-side rendering of styles in Material-UI components due to classNames being assigned differently.

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:

&gt; Warning: Prop `className` did not match. 
&gt; Server: &quot;MuiFormControl-root-3 MuiFormControl-marginNormal-4
&gt; **SearchBar-textField-31**&quot; 
&gt; Client: &quot;MuiFormControl-root-3 MuiFormControl-marginNormal-4
&gt; **SearchBar-textField-2**&quot;

I&#39;ve followed the Material-UI TextField [example docs](https://material-ui.com/demos/text-fields/), and their accompanying [Code Sandbox example](https://codesandbox.io/s/2012x8202y), but I can&#39;t seem to figure out what is causing the difference between the server and client classNames.

I experienced a similar issue when adding Material-UI Chips with a delete &#39;x&#39; icon. The &#39;x&#39; icon rendered with a monstrous 1024px width after refreshing. The same underlying issue being that icon was not receiving the correct class for styling.

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.

I don&#39;t know enough to tell whether [this Github discussion](https://github.com/mui-org/material-ui/issues/7836) might help, but likely not since they were using a beta version of Material-UI.

#Minimal steps to reproduce:#
Create project folder and start Node server:

    mkdir app
    cd app
    npm init -y
    npm install react react-dom next @material-ui/core
    npm run dev

### edit package.json:
Add to &#39;scripts&#39;: `&quot;dev&quot;: &quot;next&quot;,`

### app/pages/index.jsx:

    import Head from &quot;next/head&quot;
    import CssBaseline from &quot;@material-ui/core/CssBaseline&quot;
    import SearchBar from &quot;../components/SearchBar&quot;
    
    const Index = () =&gt; (
      &lt;React.Fragment&gt;
        &lt;Head&gt;
          &lt;link
            rel=&quot;stylesheet&quot;
            href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500&quot;
          /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
          &lt;meta charSet=&quot;utf-8&quot; /&gt;
        &lt;/Head&gt;
        &lt;CssBaseline /&gt;
        &lt;SearchBar /&gt;
      &lt;/React.Fragment&gt;
    )
    
    export default Index

### app/components/SearchBar.jsx:

    import PropTypes from &quot;prop-types&quot;
    import { withStyles } from &quot;@material-ui/core/styles&quot;
    import TextField from &quot;@material-ui/core/TextField&quot;
    
    const styles = (theme) =&gt; ({
      container: {
        display: &quot;flex&quot;,
        flexWrap: &quot;wrap&quot;,
      },
      textField: {
        margin: theme.spacing.unit / 2,
        width: 200,
        border: &quot;2px solid red&quot;,
      },
    })
    
    class SearchBar extends React.Component {
      constructor(props) {
        super(props)
        this.state = { value: &quot;&quot; }
        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=&quot;off&quot;
            onSubmit={this.handleSubmit}
          &gt;
            &lt;TextField
              id=&quot;search&quot;
              label=&quot;Search&quot;
              type=&quot;search&quot;
              placeholder=&quot;Search...&quot;
              className={classes.textField}
              value={this.state.value}
              onChange={this.handleChange}
              margin=&quot;normal&quot;
            /&gt;
          &lt;/form&gt;
        )
      }
    }
    
    SearchBar.propTypes = {
      classes: PropTypes.object.isRequired,
    }
    
    export default withStyles(styles)(SearchBar)

Visit page in browser `localhost:3000` and see this:

[red border around TextField component][2]

Refresh the browser and see this:

[TextField component&#39;s styles are gone][1]

Notice that the red border around TextField disappears.

#Relevant Libs:#
- &quot;react&quot;: 16.4.0
- &quot;react-dom&quot;: 16.4.0
- &quot;next&quot;: 6.0.3
- &quot;@material-ui/core&quot;: 1.2.0


  [1]: https://i.stack.imgur.com/a2I7y.png
  [2]: https://i.stack.imgur.com/Nm4Ww.png

All Nextjs Solutions on Gang of Coders

Total of 1 Nextjs Solutions

React + Material-UI - Warning: Prop className did not match