Styled-components refer to props of sibling component

Question

I have two styled-components:

const Heading = styled.h3`
  font-size: ${({size}) => ({
    large: '24px',
    medium: '18px',
    small: '14px'
  }[size])}
`

const Paragraph = styled.p`
  font-size: ${({size}) => ({
    large: '18px',
    medium: '16px',
    small: '12px'
  }[size])}
`

And would like to add some rules so they reference each other -- for example if a large heading is above a medium or small paragraph the heading should have a 20px margin bottom but if it is above a large paragraph it should have a 30px margin bottom. Not using styled-components this seems pretty easy to do with class names. In your style sheet you would have a rule like:

h3.large + p.medium, h3.large + p.small {
  margin-bottom: 20px;
}
h3.large + p.large {
  margin-bottom: 30px;
}

But I am not sure how to do that in styled-components. I know I could split Paragraph into three separate components SmallParagraph, MediumParagraph, and LargeParagraph but I would really prefer not to do that.

Answer 1

You can use a "component selector" to target another styled component: https://www.styled-components.com/docs/advanced#referring-to-other-components

Note that the styled-components v4 beta has some important fixes around this functionality to make it work better, so I definitely recommend upgrading if you can.