Where to import stylesheets for components in (`create-react-app`) React.js app?

Solution 1:

Generally I'd advise to import them locally, as this will enable you to later introduce per-page code-splitting if you wish to, whereas I don't see any advantage to importing them in your application root.

This approach should also make it easier to spot when you've forgotten to import one of your sheets and enables you to not always have to edit an extra file (your entry file) when adding a component.

However I'd also suggest you have a look at styled-components, a library for inlining your styles alongside your components.

Solution 2:

This is more architectural type of question. Importing CSS with your module is fine. There's whole debate between CSS-in-JS (what you're doing now) vs traditional CSS.

Thus, the stylesheets are global

CSS is global. If you want to scope your CSS either use some kind of technique like BEM or completely different technology CSS modules which will generate unique class names for your components.

It's also perfectly fine to have one central CSS file (like index.css or styles.css) where you import all other CSS files. Then you only import this central CSS file in one place and it will in turn import other stylesheets.

That is my preferred approach actually but it has some downsides - for example dynamically loading the stylesheet only when the component loads etc.

Solution 3:

If you have global styles that is going to apply on whole application. Put it in App.css or at global level. Else for each component make a folder like Homepage -> In that create Homepage.jsx and Homepage.styles.scss , It will be better. Else use styled-component no need to import