In case you are using the Material-UI library for React and you want to manage your css in external files, I posted an article on how to do this:
This solution is better because it allows you to separate your CSS from Javascript the way CSS was meant to be. This allows you to use your IDE's css tool to edit your css as you normally do and any edits you make are automatically updated in your React app.
Top comments (4)
... except "meant to be" is a point of perspective. Material UI have explicitly chosen the JSS model above SASS and CSS, have they not?
Embedding css into javascript isn't cool. UI designers who rely on IDE tools to manage css will find Material-UI's approach totally useless. There is nothing to gain by integrating css into javascript. I suspect that they chose that route because it was too much work requiring developers to install jQuery and a third party plugin to parse css. It doesn't even fit into React's standard way of handling css.
Actually React's documentation clearly states they have no opinion of using JSS (but discourage inline styling )(reactjs.org/docs/faq-styling.html).
I don't know where jQuery comes in bu usually you just use Webpack to transform your dev-project into whatever shape or form you want your build to take: external CSS, one master-css etc.
In my opinion declaring CSS by ways of JSS does have some convenience to it in that it's neat to manipulate and use programmatically.
Embedding css into javascript is really only beneficial to individual developers or small teams. But on large projects where you have a dedicated UI/UX designer who is responsible for the app's styles, this becomes a headache. Most high end UI/UX designer tools come with built-in support for exporting their styles to css. A developer only needs to drop that into a folder and it will get used. In these kinds of projects, it is not the developer's responsibility to manage styles. Webpack does a nice job of importing css. But the Material-UI library doesn't use external css files.
Having external css files is just another extension of the so-called "separation of concerns" that developers employ within their software design. UI/UX designers are every much part of the continuous integration process as everyone else on the development team and a clean separation between the boundary dividing UI/UX development and code should be clearly identified in a team.