みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

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

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

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

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

import styled from "styled-components";

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

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

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

おわり。

参考 :