목록Framework || Library/styled-components (1)

bravo my life!

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

1. 개요 & + & 선택자를 사용한다면 편하게 margin을 관리할 수 있다. 연속되는 같은 클래스의 요소들 중 첫 번째 요소를 제외한 나머지만 속성을 줄 수 있는 선택자이다. 하지만 하나의 styled-components 변수안에서 & + & 선택자를 두 번 사용하게 된다면 적용이 불가능하다. styled-components 버전 5.2.0 부터 발생된 문제로 보인다. 똑같은 동작을 하는 다른 방법은 없을까? 2. 코드 상세 좌측이 수정 전, 우측이 수정 후 코드이다. & + & 로 사용하던 선택자를 &:not(:first-child)로 변경하여 첫번째 자식요소를 제외하게 만들어 주었다. 이상없이 작동이 된다.
Framework || Library/styled-components 2022. 8. 30. 17:06
이전 Prev 1 Next 다음