スコープ付き CSS のように使う

styledの引数に React コンポーネントを渡すとレンダリング時、そのプロパティに Styled Components がランダムに生成したclassNameが渡されます。

const Foo = props => {
  return <div className={props.className}>...</div>
};

const StyledFoo = styled(Foo)`
  color: orange;
`;
// ...

コンポーネントの構造が複雑な時、それら全てにclassNameをクラスに付与することで.scope.my-classNameのようなスコープを付きのセレクタでスタイル付けできるようになります。

またその時styledの中で.scope&と書くことができるので、実際には&.my-classNameと書くことができます。

const Foo = props => {
  return (
    <div className={`${props.className} first`}>
      <div className={`${props.className} second`}>
        <div className={`${props.className} third}`}>
          ...
        </div>
      </div>
    </div>
  );
};

const StyledFoo = styled(Foo)`
  &.first {
    color: orange;
  }

  &.second {
    width: 980px;
    margin: 0 auto;
  }

  &.third {
    display: inline-flex;
  }
`;