📌

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

2022/07/23に公開約400字

オブジェクトとオブジェクトの間に 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 を組み合わせた方がベストプラクティスな気もしますが…… ↩︎

Discussion

ログインするとコメントできます