CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
some
some

Reputation: 93

Creating a global style from a file using styled-components' createGlobalStyle()

I am currently attempting to combine styled-components and react-bootstrap in my React app. I want to use the global stylesheet that comes packaged with react-bootstrap, which I am currently doing with import "bootstrap/dist/css/bootstrap.min.css";.

The docs do have some examples, and I think I understand the basic idea of how you create a global style. However, it seems like the way styled-components wants me to import the global stylesheet is by calling createGlobalStyle() on the file's CSS, but every example I've seen is calling the function on a template string. Is my only option here really to read the entire CSS file in as a string and feed it into createGlobalStyle?

Upvotes: 4

Views: 5913

Answers (1)

some
some

Reputation: 93

Some more digging has produced an answer. A warning generated by createGlobalStyle inside the dev console says the following:

GlobalStyle.js:28 Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical meta tag to the stylesheet, or simply embedding it manually in your index.html section for a simpler app.

It seems like the correct way to import a css file is to simply add it inside a helmet.

Upvotes: 3

Related Questions