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?

I tried including it in the return but to no avail.

```
return (
<div>
<link
      rel="stylesheet"
      href="//fake.net/thirdpartylibrary.js/latest/thirdpartylibrary.min.css"
    />
</div>
)

```

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.

```
 const linkElement = document.createElement("link");
      linkElement.setAttribute("rel", "stylesheet");
      linkElement.setAttribute("type", "text/css");
      linkElement.setAttribute(
        "href",
        "//fake.net/thirdpartylibrary.js/latest/thirdpartylibrary.min.css"
      );
      document.head.appendChild(linkElement);

```

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.