Can you import an external CSS file in a React js file?

Question

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.

hustle100 · Accepted Answer · 2021-04-12 22:37:20Z

2

wrapped in a useEffect hook and add a state value that is set to true after the stylesheet is appended to the document head.

const [isLinkElementLoaded, setLinkElementLoaded] = useState(false)

    useEffect(() => {
    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);

          setLinkElementLoaded(true)
    }, []);

return (
          <>
            {isLinkElementLoaded && <div>Styled Component</div>}
          </>
)

answered Apr 12, 2021 at 22:37

hustle100

731 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomasz Nguyen · Accepted Answer · 2021-04-12 21:14:52Z

1

Try inside your component:

import React from 'react';
import './style.css';

...

answered Apr 12, 2021 at 21:14

Tomasz Nguyen

2,62125 silver badges25 bronze badges

2 Comments

Sylhare Over a year ago

But in that case, the "third party" css would have to be copied and stored locally. Unless you have an @import to the third party css url in the style.css file.

hustle100 Over a year ago

@Sylhare yea, I'm wondering if there's any way to do it without an html or css file

Collectives™ on Stack Overflow

Can you import an external CSS file in a React js file?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related