styled-components: использование селектора `& + &` и адаптация на основе реквизита

Question

У меня есть несколько компонентов, отображаемых с тем же стилевым компонентом, и я хочу сделать между ними некоторую верхнюю границу

const Item = styled.div`
  color: ${props => props.active ? 'red' : '#333'};
  & + & {
    margin-top: 10px;
  }
`

<Item active={false}/>
<Item active={false}/>
<Item active={false}/>

пока все хорошо,

, но когда один изу них есть true активная опора, отсутствует поле margin-top, я обнаружил, что это связано с тем, что <Item active={false}/> и <Item active={true} /> не имеют одно и то же имя класса.

Есть ли способ исправить эту проблему??

PS

Я только начинаю со стилевыми компонентами, и я также ищу лучшую практику с этим.

Answer 1

компоненты должны иметь то же имя класса, что и тот же компонент styled-components.

Но что касается & + &, если вам нужны все из них, тогда достаточно простого margin-top: 10px, если вы хотите сделать между ними, вы можете просто указать first-child, last-child как margin: 0.

<React.Fragment>
  <Item active={false}>First</Item>
  <Item active={false}>Second</Item>
  <Item active={false}>Third</Item>
</React.Fragment>

Код и поле для демонстрации: https://codesandbox.io/s/62l02knn5r