I'm always interested to see how other people utilise styled-components and the tips Josh shares offer exactly that kind of insight. I fundamentally disagree with his take on descendent selectors (👀) but really love his use of CSS variables as a passthrough technique. Prop passthrough to CSS is something that I always have to think about with styled-components, but this feels like a very performant and useful mental model:
function Backdrop({ opacity, color, children }) {
return (
<Wrapper
style={{
'--color': color,
'--opacity': opacity,
}}
>
{children}
</Wrapper>
)
}
const Wrapper = styled.div`
opacity: var(--opacity);
background-color: var(--color);
`;
It feels like this method fits the spirit of both CSS and styled-components much better than techniques I've used in the past 👍
Still, even Josh doesn't have any tips on how to get rid of styled-components most opinionated (and, imo, most annoying) feature: class-name hashes. He does mention the excellent method of at least prepending the meaningless gibberish with a useful, human-readable token, but I still wish you could go a step further and just define the class name yourself. One of these days...
