【React】styled-components内で他のコンポーネントを入れ子指定する

styled-components内で他のコンポーネントを入れ子指定する

styled-components内で子のコンポーネントのスタイルを指定したいときは、コンポーネント名を指定してあげればよい。

export const App: VFC = () => {
  return (
    <div>
      <ParentComponent>
        <div>テキスト1</div>
        <ChildComponent>テキスト2</ChildComponent>
      </ParentComponent>
      <ChildComponent>テキスト3</ChildComponent>
    </div>
  );
};

const ChildComponent = styled.div`
  color: blue;
`;

const ParentComponent = styled.div`
  color: red;
  > ${ChildComponent} {
    color: green;
  }
`;

ドキュメント
https://styled-components.com/docs/advanced#caveat

コード動作例