헷갈리는 styled component 기능

1. 하위 컴포넌트

하위 컴포넌트에게 지정하고 싶은 스타일은 다음과 같이 { } 스코프를 사용하면 된다.

  a {
    color: black;
    font-size: 20px;
    text-decoration: none;
    margin: 0 10px;
  }

 

2. &: 연산자 : 재참조

&를 사용하여 해당 컴포넌트를 재참조할 수 있다.

 &:hover {
    background: #339af0;
  }
  &:active {
    background: #1c7ed6;
  }

 

3. &. 연산자 : classname 

&.classname 으로 조건부를 실행할 수 있다.

예로 다음과 같이 현재 페이지에만 on 이라는 classname 을 부여할 때,

 if (i === pagination.current) {
 	el.className = "on";
 }

const Pagination = styled.div`
    &.on {
      color: orange;
      font-weight: bold;
    }
  }

다음과 같이 on 일 때만 스타일을 적용할 수 있다.