Styled-components 是指兄弟组件的 props

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 的底部边距，但如果它在一个大段落之上，它应该有一个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

请注意，styled-components v4 测试版围绕此功能进行了一些重要的修复，以使其更好地工作，所以如果可以的话，我绝对建议升级。