title: Can you import an external CSS file in a React js file?
body: <p>I'm using a third party library installed through npm, but it requires an external stylesheet if you want to use its styles.
  I only want to load the styles on a certain page though and don't want to include it in the main html file. We use Material-UI and don't have any style sheets either so is there a way to import it directly from my component's js file?</p>
  <p>I tried including it in the return but to no avail.</p>
  <pre><code>return (
  &lt;div&gt;
  &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;//fake.net/thirdpartylibrary.js/latest/thirdpartylibrary.min.css&quot;
      /&gt;
  &lt;/div&gt;
  )
  </code></pre>
  <p>I've also tried appending the stylesheet to the document head from within my component and it does add it, but does not load in time.</p>
  <pre><code> const linkElement = document.createElement(&quot;link&quot;);
        linkElement.setAttribute(&quot;rel&quot;, &quot;stylesheet&quot;);
        linkElement.setAttribute(&quot;type&quot;, &quot;text/css&quot;);
        linkElement.setAttribute(
          &quot;href&quot;,
          &quot;//fake.net/thirdpartylibrary.js/latest/thirdpartylibrary.min.css&quot;
        );
        document.head.appendChild(linkElement);
  </code></pre>
  <p>edit:
  It works if I wrap the above in a useEffect hook and add a state value that is set to true after the stylesheet is appended to the document head.</p>