title: Nextjs css flickering
body: <p>I'm building a react app using material ui and nextjs. I'm using <code>&lt;Autocomplete /&gt;</code> component, provided by material UI and override some its styles with my own like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Autocomplete
    classes={{
      root: `${styles[`search__autocomplete`]} ${
        styles[`search--${variant}__autocomplete`]
      }`,
      inputRoot: `${styles[`search__autocomplete-input`]} ${
        styles[`search--${variant}__autocomplete-input`]
      }`
    }} 
  /&gt;
  </code></pre>
  <p><code>variant</code> is a prop, which gets passed to the component and <code>styles</code> is a variable, which get imported from the <em>css module</em>: <code>import styles from &quot;Search.module.sass&quot;</code>.</p>
  <p>Now, when I'm working on this locally everything looks great:</p>
  <p><a href="https://i.stack.imgur.com/XZxlE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZxlE.png" alt="expected" /></a></p>
  <p>But, after I deploy it to production via <code>next build &amp;&amp; next export</code> I start experiencing &quot;flickering&quot; effect when for like 1/3 of a second my page looks like this:</p>
  <p><a href="https://i.stack.imgur.com/H3UzW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H3UzW.png" alt="enter image description here" /></a></p>
  <p>My guess is that it might be related to the fact that nextjs export my css to several files on production:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/css/4dcd7fa805fb41261f08.css&quot;
        as=&quot;style&quot;
      /&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;/_next/static/css/4dcd7fa805fb41261f08.css&quot;
        data-n-g=&quot;&quot;
      /&gt;
      &lt;link
        rel=&quot;preload&quot;
        href=&quot;/_next/static/css/a23cf79bceae4047fddb.css&quot;
        as=&quot;style&quot;
      /&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;/_next/static/css/a23cf79bceae4047fddb.css&quot;
        data-n-p=&quot;&quot;
      /&gt;
  </code></pre>
  <p>How can I solve that?</p>