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

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

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

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

import styled from "styled-components";

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

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

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

おわり。

参考 :

• https://styled-components.com/docs/advanced#caveat