[styled-components] 두 번 사용된 & + & 선택자가 의도하지 않은 작동을 할 때(feat. not())

1. 개요

& + & 선택자를 사용한다면 편하게 margin을 관리할 수 있다.

연속되는 같은 클래스의 요소들 중 첫 번째 요소를 제외한 나머지만 속성을 줄 수 있는 선택자이다.

하지만 하나의 styled-components 변수안에서 & + & 선택자를 두 번 사용하게 된다면 적용이 불가능하다.

styled-components 버전 5.2.0 부터 발생된 문제로 보인다.

똑같은 동작을 하는 다른 방법은 없을까?

2. 코드 상세

좌측이 수정 전, 우측이 수정 후 코드이다.

& + & 로 사용하던 선택자를 &:not(:first-child)로 변경하여 첫번째 자식요소를 제외하게 만들어 주었다.

이상없이 작동이 된다.