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