Styled-компоненты относятся к опорам родственного компонента

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-компонентов это кажется довольно простым для имен классов.В вашей таблице стилей у вас будет правило вроде:

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

Но я не уверен, как это сделать в styled-компонентах.Я знаю, что могу разделить Paragraph на три отдельных компонента: SmallParagraph, MediumParagraph и LargeParagraph, но я бы действительно предпочел этого не делать.

Answer 1

Вы можете использовать «селектор компонента» для нацеливания на другой стилизованный компонент: https://www.styled -components.com / docs / advanced # ссылающийся на другие компоненты

Обратите внимание, чтоВ бета-версии styled-components v4 есть несколько важных исправлений, касающихся этой функциональности, чтобы она работала лучше, поэтому я определенно рекомендую обновить ее, если можете.