[이슈] : styled-components에서 자기 자신 가리키기

📋 내용 : styled-components를 사용해 스타일할 때, 자기 자신에 선택자 지정하기

const Container = styled.div`
  display: flex;
  width: 1200px;
  height: 800px;
`;

styled-components를 사용해 위와 같은 컴포넌트를 만들었다고 가정하자.

그런데 말 그대로 이런 스타일의 컴포넌트를 만든 것인데, :hover나 ::after 등의 의사 선택자(Pseudo-selector)는  어떻게 지정할까?

 

아주 간단하다.

const Container = styled.div`
  display: flex;
  width: 1200px;
  height: 800px;
  
  &::after {
    content: "";
    width: 30px;
    height: 30px;
  }
  
  &:hover {
    background-color: red;
  }
`;

이렇게 자기 자신을 가리키는 지정자인 &를 활용해 스타일해주면, 별도의 CSS 파일 없이도 의사 선택자를 지정해줄 수 있다.