In an effort to modularize my extensive React application into reusable components that can be shared with other projects, I am looking to create a mini UI library consisting of generic components like Buttons, Headers, and Dropdowns. However, the challenge lies in managing the CSS since my current approach involves a single stylesheet for the entire app.
There are a couple of solutions I've come across:
- Include the CSS styles within the JS file of each component (CSS in JS).
- Use
importorrequirestatements to bring CSS files into the component's JS file and utilize webpack to bundle the CSS.
While these options have their benefits, they don't quite align with my preferences. Embedding the styles in the component feels cluttered and limits the flexibility of cascading styles. On the other hand, importing CSS files directly into JS just doesn't sit right with me as it blurs the line between JavaScript and CSS.
Are there any alternative methods for incorporating a traditional CSS file from an NPM module without resorting to copying and pasting from node_modules? I'm open to suggestions for a more seamless solution. :)