なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

2020/02/12

styled-components で他のコンポーネントにネストした CSS を書きたい

カテゴリー：

ちょっと分かりにくいのですが、下のような CSS を書きたいときの方法。

.element1 > .element2 {
  /* ... */
}

やり方は簡単で、別の Style されたコンポーネントを含むように作ってあげれば良い。

import styled from "styled-components";

const ChildComponent = styled.div`
  /* styles */
`;

const ParentComponent = styled.div`
  /* styles */

  > ${ChildComponent} {
    /* styles */
  }
`;

おわり。

参考 :

Copyright (c) 2015 - 2023 Natsuneko <me@natsuneko.cat>