Discussion on: Build your own styled-components

Hi, I think it's worth noting every styled-component has a cost (because it is a whole react component unto itself) for your first example it would be a lot more efficient to write something like.

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;

  & h1.page-name__title{
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  }
`;

render(
  <Wrapper className="page-name">
    <h1 className="page-name__title">
      Hello World!
    </h1>
  </Wrapper>
);

This will have the exact same end result but will generate a lot less JS giving a better user experience. You'll notice I also used BEM but that's just personal preference,.