How to target child element styled components with React?

To target child element styled components with React, we add & before our selectors.

For instance, we write

const ImgGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  & ${ImgCell}:nth-child(2) ${ColorBox} {
    background: #ff00ff;
  }
`;

to seelct the 2nd child of an element with

& ${ImgCell}:nth-child(2) ${ColorBox}

where ImgCell is a selector that has the 2nd child of the element we’re selecting.