I would like to know how do you guys deal with styles in React components especially when it comes to server side rendering.
I am using Webpack and making bundles for client and server. At this moment I figured out that there are several options:
ExtractTextPlugin to extract all styles to a single file and hang it up to HTML while rendering on server;if (BROWSER) require('./style.css'). In this case server rendered components do not have styles at all and they'll be applied after the client app starts;How do you deal with it?
We use Sass and React CSS Modules https://github.com/gajus/react-css-modules . In Production we Extract the Styles to a minified Stylesheet. Together with HMR you have everything you need ;)
We had a similar discussion a few days back. It doesn't discuss about managing styles while doing SSR, but has some good answers.
Juho Vepsäläinen
SurviveJS
I wrote an entire chapter about the topic. There isn't a silver bullet and it's al situational.
On simple projects I stick to basic CSS and then generate a separate CSS to load using the
ExtractTextPlugin. Of course this is something that doesn't scale well as you start hitting the problems of CSS, mainly globals.There are all sorts of ways to deal with that ranging from conventions to pre/postprocessor based solutions. From my point of view CSS Modules seems like the strongest contender at the moment.
Compared to the inline styling based solutions there's less to learn while CSS Modules solve the fundamental problem of globals. It seems something particularly fitting for React given already deal in terms of components. Check out Pattern Lab for a related idea and inspiration.