Utilizing a third-party npm library, I encountered the need for an external stylesheet to incorporate its styles. However, my intention is to load these styles exclusively on a specific page without including them in the main html file. Given our utilization of Material-UI without any existing style sheets, is there a method to directly import the stylesheet from my component's js file?
Despite attempting to integrate it within the return function, no success was achieved.
return (
<div>
<link
rel="stylesheet"
href="//fake.net/thirdpartylibrary.js/latest/thirdpartylibrary.min.css"
/>
</div>
)
In another attempt, appending the stylesheet to the document head from within my component does add it, but it fails to 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: After enclosing the above code block within a useEffect hook and implementing a state value that switches to true once the stylesheet is appended to the document head, it successfully functions.