样式组件是指兄弟组件的道具

Question

我有两个样式化的组件：

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])}
`

并希望添加一些规则，以便它们互相引用-例如，如果大标题位于中段或小段落上方，则标题底部应有20px的页边距，但如果标题位于大段落上方，则应具有20px的页边距底边距30px。不使用样式化组件，这似乎很容易用类名来完成。在样式表中，您将具有类似

的规则

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

但是我不确定如何在样式化组件中做到这一点。我知道我可以将Paragraph分为三个独立的组件SmallParagraph，MediumParagraph和LargeParagraph，但我真的不希望这样做。

Answer 1

您可以使用“组件选择器”来定位其他样式的组件：https://www.styled-components.com/docs/advanced#referring-to-other-components

请注意，样式化组件v4 beta对此功能进行了一些重要修复，以使其更好地工作，因此，我绝对建议您进行升级。