LoginSignup
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-07-10

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1