title: Best way to do database-driven styles in react
body: <p>This is a little bit of a subjective question but I hope SO can help.</p>
  
  <p>I'm making a ReactJS app and I need to customize certain parts of the style (the color scheme mostly) based on a user's settings in a database.  The color palette is spread out over a lot of the style sheet so I'd like to avoid setting all those colors by hand in the <code>render()</code> method.</p>
  
  <p>One option is to server-side render the full css file on every request. Would something like SASS be able to do this in real time? I know most preprocessors are designed for compile-time use.</p>
  
  <p>Another option would be to embed the styling in a JavaScript module with something like <a href="https://www.npmjs.com/package/react-style" rel="nofollow noreferrer">react-style</a>.  Each components "stylesheet" could actually become a function that takes some preferences and returns styles.  This strategy has some downsides (as described <a href="http://jamesknelson.com/why-you-shouldnt-style-with-javascript/" rel="nofollow noreferrer">here</a>) plus the extra inconvenience of having to pas a "styleSettings" prop down to EVERY component so it could know how to request its styles.</p>
  
  <p>Alternatively I could just have a single global or page-wide style sheet so I have to deal with fewer props, but I like the modularity of each component getting its own style.</p>
  
  <p>Are there any other options I'm missing here? Is there a best practice for doing this type of thing?</p>