title: Warning: Prop `className` did not match ~ Material UI css arbitrarily breaks on reload
body: <p><a href="https://i.stack.imgur.com/MxAiY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MxAiY.png" alt="enter image description here"></a></p>
  
  <p><a href="https://streamable.com/k3xn3" rel="noreferrer">Video reproducing the error/missing css</a></p>
  
  <p>I <strong>know</strong> there are already dated versions of this question on stack overflow, like <a href="https://stackoverflow.com/questions/50685175/react-material-ui-warning-prop-classname-did-not-match">React + Material-UI - Warning: Prop className did not match</a>.</p>
  
  <p>However, when I attempt to google and research people's solutions, there is just no clear answer. Any answers I could find don't match my stack.</p>
  
  <p>My stack:</p>
  
  <ul>
  <li>Node JS</li>
  <li>Next JS</li>
  <li>Material UI</li>
  </ul>
  
  <p>And from what I could glean from answers to questions like <a href="https://stackoverflow.com/questions/48271953/next-js-material-ui-getting-them-to-work?rq=1">next.js &amp; material-ui - getting them to work</a> is that there is some measure of incompatibility when it comes to Next JS and Material UI.</p>
  
  <p>Code-wise, here is my Appbar component. Initially I was not exporting my <code>useStyles</code> object, but I ended up doing it in a pitiful attempt to follow along with <a href="https://material-ui.com/guides/server-rendering/" rel="noreferrer">Material UI's express guide to "server rendering"</a>. There has to be a fix that doesn't involve changing like every file I have.</p>
  
  <pre><code>import React from 'react';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import InputBase from '@material-ui/core/InputBase';
  import { fade } from '@material-ui/core/styles/colorManipulator';
  import { makeStyles } from '@material-ui/core/styles';
  import MenuIcon from '@material-ui/icons/Menu';
  import SearchIcon from '@material-ui/icons/Search';
  import {connectSearchBox} from 'react-instantsearch-dom';
  
  const useStyles = makeStyles(theme =&gt; ({
      root: {
          flexGrow: 1,
      },
      menuButton: {
          marginRight: theme.spacing(2),
      },
      title: {
          flexGrow: 1,
          display: 'none',
          [theme.breakpoints.up('sm')]: {
              display: 'block',
          },
      },
      search: {
          position: 'relative',
          borderRadius: theme.shape.borderRadius,
          backgroundColor: fade(theme.palette.common.white, 0.15),
          '&amp;:hover': {
              backgroundColor: fade(theme.palette.common.white, 0.25),
          },
          marginLeft: 0,
          width: '100%',
          [theme.breakpoints.up('sm')]: {
              marginLeft: theme.spacing(1),
              width: 'auto',
          },
      },
      searchIcon: {
          width: theme.spacing(7),
          height: '100%',
          position: 'absolute',
          pointerEvents: 'none',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
      },
      inputRoot: {
          color: 'inherit',
      },
      inputInput: {
          padding: theme.spacing(1, 1, 1, 7),
          transition: theme.transitions.create('width'),
          width: '100%',
          [theme.breakpoints.up('sm')]: {
              width: 300,
              '&amp;:focus': {
                  width: 400,
              },
          },
      }
  }));
  
  function SearchBox({currentRefinement, refine}){
      const classes = useStyles();
      return(
          &lt;InputBase
              type="search"
              value={currentRefinement}
              onChange={event =&gt; refine(event.currentTarget.value)}
              placeholder="Search by state, park name, keywords..."
              classes = {{
                  root: classes.inputRoot,
                  input: classes.inputInput,
              }}
          /&gt;
      )
  }
  
  const CustomSearchBox = connectSearchBox(SearchBox);
  
  function SearchAppBar() {
      const classes = useStyles();
      return (
          &lt;div className={classes.root}&gt;
              &lt;AppBar position="static" color="primary"&gt;
                  &lt;Toolbar&gt;
                      &lt;IconButton
                          edge="start"
                          className={classes.menuButton}
                          color="inherit"
                          aria-label="Open drawer"
                      &gt;
                          &lt;MenuIcon /&gt;
                      &lt;/IconButton&gt;
                      &lt;Typography className={classes.title} variant="h6" noWrap&gt;
                          Title
                      &lt;/Typography&gt;
                      &lt;div className={classes.search}&gt;
                          &lt;div className={classes.searchIcon}&gt;
                              &lt;SearchIcon /&gt;
                          &lt;/div&gt;
                          &lt;CustomSearchBox/&gt;
                      &lt;/div&gt;
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
          &lt;/div&gt;
      );
  }
  
  export {SearchAppBar, useStyles};
  </code></pre>