Theme can be stored (or generated) in a js file. For instance, we can keep all of them, in folder and load, while bootstrapping the application. Provide theme to the app. Now your theme will be available via of styled-components. Theme property can be anything you defined it to be. In the example below, it’s an object with two properties: and name.

IMO styled-components library has only one problematic warning. It’s “Warning: Received for non-boolean attribute”. When I encountered it for the first time it took me some time to figure out what was the problem. Because it’s somehow counterintuitive, and the official documentation doesn’t really help to solve it. Ok, first of all, what does this error mean. It means that you passed boolean value for the property of a DOM element. I will rephrase in order to make it crystal-clear - you took…

The whole logic of styled-components can be described in one “feature request”: “Let’s manage CSS in js alongside with component core code”. The logic behind it is sort of obvious - it will give us the dynamic of js inside of CSS and we’ll be able to treat styling as part of component code and not store it in a separate file. The idea is promising, now let’s see what are some of the edge cases. And why is that? Because nothing is ideal in the world.