반응형
현업에서 스타일드 컴포넌츠를 쓰기 시작한지 얼마 되지 않은 시점에 당황했던 부분을 잊지 않기 위해 기록을 남겨본다.
styled-components 에서 last-child 를 사용해보자.
결과화면 미리보기
<button>이 두 개가 있다.
두 번째 버튼의 margin-left 만 주려고 한다. 이때 나는 last-child 를 사용하고 싶다.
자, 그럼 styled-components 에서 last-child 를 사용해보자
Styled-components(5) first-child와 last-child 사용하기
import styled from 'styled-components'; // 일단 임포트 해주시고
<Styled_Button> // 스타일드 컴포넌트로 <button> 들을 감싸주었다
<button>이전</button>
<button>다음</button>
<Styled_Button>
스타일드 컴포넌트 내에서 &:last-child 를 사용한다
const Styled_Button = styled.div`
button {
&:last-child { // 마지막 <button> 태그에만 적용이 된다
margin-left: 15px;
}
}
`;
반응형
'React' 카테고리의 다른 글
React(61) React Toolkit - createSelector 사용하기 (0) | 2022.02.19 |
---|---|
React(60) Redux-toolkit 사용하기 (0) | 2022.02.17 |
React(59) 맵(Map) 사용하기 - set / get / has / delete / clear / size (0) | 2022.02.04 |
React(58) - 화살표 회전 애니메이션 만들기 (0) | 2022.02.03 |
React(57) Redux 로 객체배열 저장하기 (redux 상태관리) (0) | 2022.02.01 |
댓글