title: GatsbyJs and Material-UI css is lost on page refresh
body: <p>I have a gatsby site which runs fine on develop mode but whenever the site is built and deployed and the page is refreshed the site renders erratically.</p>
  <p>I suspect the header component which has a window.innerwidth query is the cause.</p>
  <p>Here is my code:</p>
  <pre><code>export default function Header(props) {
    const [state, setState] = useState({ mobileView: true })
    const { mobileView } = state
    const classes = useStyles()
  
    useEffect(() =&gt; {
      const setResponsiveness = () =&gt; {
        return window.innerWidth &lt; 900
          ? setState((prevState) =&gt; ({ ...prevState, mobileView: true }))
          : setState((prevState) =&gt; ({ ...prevState, mobileView: false }));
      };
  
      setResponsiveness();
      window.addEventListener(&quot;resize&quot;, () =&gt; setResponsiveness());
  
      return () =&gt; {
        window.removeEventListener(&quot;resize&quot;, () =&gt; setResponsiveness());
      }
    }, []);
  
    const MobileMenu = () =&gt; {...some code}
    const DesktopHeader = () =&gt; {...some code}
    }
  
    return (
      &lt;header&gt;
        &lt;AppBar className={classes.root} elevation={0} position='static'&gt;
          {mobileView ? &lt;MobileMenu /&gt; : &lt;DesktopHeader /&gt;}
  
        &lt;/AppBar&gt;
        
      &lt;/header&gt;
    )
  
  }
  ```
  
  The link to the deployed site can be found here: [Working Site][1]
  
  
    [1]: https://brit-tr.com
  </code></pre>