title: How to mix component level scss and global styles in nextjs
body: <p>I am using <em>Font Awesome</em> in my project and want to change the styling of a component when the user clicks on it. Here is the <em>React</em> code:</p>
  <pre><code>    &lt;div
        role=&quot;button&quot;
        onClick={() =&gt; toggleMenu(menu =&gt; (menu = !menu))}
        className={`${styles.toggleButton} ${close ? styles.showMenu : &quot;&quot;}`}
      &gt;
        &lt;i className=&quot;fal fa-horizontal-rule&quot; /&gt;
        &lt;i className=&quot;fal fa-horizontal-rule&quot; /&gt;
        &lt;i className=&quot;fal fa-horizontal-rule&quot; /&gt;
      &lt;/div&gt;
  </code></pre>
  <p>And here is the scss code:</p>
  <pre><code>.toggleButton {
    display: flex;
    flex-flow: column;
    cursor: pointer;
  
    i.fal {
      line-height: 8px;
      transition: transform 300ms ease-in-out;
    }
  }
  </code></pre>
  <p>My problem is that the <code>i.fal</code> style does not get applied, as <em>nextjs</em> renders it like this <code>Header_toggleButton__2nd_H</code>. One solution I can think of would be add a custom class to the <code>&lt;i/&gt;</code> tags, but how can this be done without nextjs prepending the global <code>fal</code> classes? Furthermore, this approach strikes me as cumbersome, isn't there a more elegant not so verbose solution?</p>
  <p>Thanks for any help.</p>
  <p><strong>EDIT:</strong>
  I use the <a href="https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css" rel="nofollow noreferrer">Component-Level SCSS</a> style.</p>
  <blockquote>
  <p>CSS Modules locally scope CSS by automatically creating a unique class name</p>
  </blockquote>