I briefly checked ThemeProvider examples and it looks like a lot of manual work, and I can’t even…
Nikolay Talanov
1

Thanks for your reply, re: the typo part: it was indeed a typo / brainfart: I meant that in component based structures adding parent specific styles breaks the one-way promise of top-down direction of components.

> 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?

We have lots of those at our projects. Sure, writing foo: ${props => props.foo} can be exhausting but luckily there are other solutions thanks to JavaScript. For instance, you could instead get the variables first and use those directly

const StyledButton = styled.button`
// some base styles
border: 10px solid pink;
${({ theme: { color, backgroundColor, fontSize }}) => css`
color: ${color};
background-color: ${backgroundColor};
font-size: ${fontSize};
`}
`

if that’s too elaborate, one could, for example write a helper function that does that for you (take the theme, take the keys and kebab-case them / map them to CSS properties, make css string pairs from the values and return them in a css helper) to reduce that to

const StyledButton = styled.button`
// some base styles
border: 10px solid pink;
${props => themeToCss(props)}
`

Now you can use your themeToCss helper anywhere. Answers to your numbered questions:

  1. You should do the changes in the deeply nested components. If the top level parent needs to affect that, then yes, you either need to use weirdly specific keys or just CSS. Remember, you get to pick which parts of the theme you use, always, so you don’t need to worry about applying your theme everywhere in every component. You can have multiple themes: container themes, component themes, default themes and you can choose to ignore any properties you wish. Adding a ThemeProvider provides a theme, it does not force children to use them. It’s there for your benefit.

2. It works exactly like everything else works (as described above): you write your :hover and other pseudo classes, and apply the parts you need. If you can write it in CSS, you can also use the exact same CSS in CSS-in-JSS, with the additional benefit of having the full power of JavaScript at your hands.