I am starting to use styled-components.
I have some challenges for which I know a solution in SASS, but I am not sure how to tackle with styled-components.
The challenge is: How to setup the defaults values for all the different variables in a Theme.
Here it is a PoC:
- We are using a
theme.variables.jsfile for general/global variables like colors, margins, paddings, fonts, etc.
- Each component has it own theme object. This object contains the variables/properties specific for the component and it uses vars from
- Last but not least, we have a
theme.jsfile that exports an object with all variables from
theme.variables.jsand with the theme object from each and every component. This object is the one that should be passed as a prop in the
With this approach we have 2 levels to customise a theme:
- First, we have the global theme variables. Here we setup brand identity variables such as brand colors, fonts, spacing, etc. As far as each component theme variables are componsed from this global theme variables, all components should get a nicely styled with this brand values.
- Second we have the component theme variables. Here we can go down to a much more granular custimisation on a component basis.
I think it worth mentioning that ideally we should only use the 1st level of customisation. This way we keep a more consistent UI.
Please leave your feedback to this concept in the comments
- Do you see any pitfalls on this design?
- How do you think it can be improved?
- Do you know of any other approach to solve this challenge?
- Any other feedback you consider is valuable