I briefly checked ThemeProvider examples and it looks like a lot of manual work, and I can’t even imagine how it’s gonna look with complex combinations.
And examples looks too simple. It’s nice when there are 2–3 props passed, but what if you need to vary 10–20 things? And on top of it:
- Suddenly you need to change some minor property of deeply nested component, based on some high-level parent. And there is no direct connection between them (no chain of themeProviders). How you gonna do it? Use wrapper on parent level, came up with some strange variable name for this specific property and then finally use it in targeted component? Well, it’s basically sounds like using global variables, because there is no way that you somehow gonna keep track of all these tiny connections + always gonna be forced to came up with more strange variable names, to evade any possible collisions. And it’s just sounds painful overall, to create all these variable names each time when you want to make margin-left of this element 10px instead of 14 (oh, and this happens a lot!).
- How it’s suppose to work with more complicated stuff, which is not just about changing property, that you already have? What if you need to add :hover effect with 2–5 lines of styles? What if you need to create custom decorative element with :before/:after, which is gonna be 10 times long? (this is SUPER common case). Affecting specific nth-childs? Oh god, I can continue all day long.
And I’m a little bit confused about
>not saying that it’s particularly good practice to affect your parent containers from your children
In my scss example I’m setting children styles based on parents. It’s a good (and best in my opinion) practice, because it allows you to see all styles for specific element in one place, without jumping across your files and searching which parent-element affects this specific element. And you can’t affect parents in css (but I guess you made a typo).