css - 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。不使用 styled-components 这似乎很容易用类名来做。在你的样式表中你会有这样的规则:

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 beta 围绕此功能进行了一些重要修复以使其更好地工作，因此我绝对建议您升级。