How to manage themes for react components

Question

I want to have a stable and scalable way of implementing themes in my react-rails project. Currently the react components have their own CSS files and the styling is managed using CSS-modules ... What would be the best way to have different CSS themes for the react components

To ask specifically

• What would be a better file organization for the CSS files for implementing various themes?
• How to apply these themes to the existing react components so I could just apply one theme to the root node and all the react components falling under the component tree will have the theme applied?

Answer 1

Make a different css files for each theme. In those (s)css files, you could have theme classes. Like different colors for each theme. The variable and class-names would be the same, the content would be different. That way you could always pass the same classname, and the content would render differently depending on which theme css is used.