title: Next.js: element won't inherit global class with same classname
body: <p>I've searched a while for this issue but didn't find anything and it's driving me crazy.
  I'm using Next.js to develop an application, now I have weird bug and don't know where it comes from. 
  When I import my stylesheet as a global one in _app.js, it just appears in the head without any issue.
  The weird point is the moment when the elements come in. There I have a <code>&lt;div&gt;</code> with the correct class but somehow the element doesn't inherit the css for that class.
  Has someone else experienced this?</p>
  
  <p>UPDATE:
  Found the cause! For some reason, next.js renders <code>@charset "UTF-8";</code> on top of that css block. Any idea why it does that?</p>
  
  <p>Thanks in advance</p>
  
  <p><strong>Styles in head of the file</strong></p>
  
  <p><a href="https://i.stack.imgur.com/IdbZv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IdbZv.png" alt="Styles in Head of image"></a></p>
  
  <p><strong>Elements in the file</strong></p>
  
  <p><a href="https://i.stack.imgur.com/plvAK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/plvAK.png" alt="enter image description here"></a></p>