styled-componentsで隣接セレクタを使用する

オブジェクトとオブジェクトの間に margin を挿入する際^[1] などに有用な隣接セレクタ（foo + bar）を styled-components で使用したい場合のメモ

Child.toString() は適当なクラス名を返すため、 Wrapper に変数展開して指定する。

const Child = styled.li`...`;
const Wrapper = styled.ul`
  ${Child} + ${Child} {
    margin-top: 10px;
  }
`;
return (
  <Wrapper>
    {list.map((child) => <Child>{child}</Child>)};
  </Wrapper>
);

脚注

1. 近年であれば display: flex; と gap を組み合わせた方がベストプラクティスな気もしますが……