Demystifying styled-components

Josh W. Comeau lays out the details how styled-components works internally.

For so many React devs, styled-components seems kinda magical. It isn’t at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we’ll learn exactly how styled-components works by building our own mini-version.

const styled = (Tag) => (styles) => {
  return function NewComponent(props) {
    const uniqueClassName = comeUpWithUniqueName(styles);
    createAndInjectCSSClass(uniqueClassName, styles);

    return <Tag className={uniqueClassName} {...props} />
  }
}

styled.h1 = styled('h1');
styled.button = styled('button');
// ...And so on, for all DOM nodes!

Demystifying styled-components →