I have created a new React.js app using create-react-app.
For each component (e.g. src/components/ComponentX.js), I have created a separate stylesheet (src/styles/ComponentX.css), and imported it as follows import "../styles/ComponentX.css".
This has in turn resulted in a separate <style>...</style> section for each imported stylesheet on every page. Thus, the stylesheets are global (which makes sense for SPA?), albeit not concatenated as described here:
In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified .css file in the build output.
Since it doesn't seem to affect the functionality of the React.js app, where stylesheets are imported, where should I import my stylesheets? Local to the components or in src/index.js?
Bonus: What about components sharing the same stylesheet? Should both import it, if following the local approach?
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.
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.
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