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?