[styled component] 가상선택자와 참조

.parent {
width:300px;
height:300px;
background:#eee;
}

.child {
width:50px;
height:50px;
background:#fff;
}


.parent:hover .child{
background:#000
}

부모태그(parent)에게 hover 시 자식태그(child) 의 background color 가 바뀌는 css

이를 react 의 styled component 에서 사용시

 

const Child = styled.div`
  width:50px;
  height:50px;
  background:#fff;
`

const Parent = styled.div`
  width:300px;
  height:300px;
  background:#eee;
  
  &:hover ${Child}{
  background:#000;
  }
`;

SCSS 식으로 작성 가능하다.

위와같이 다른 styled component 를 참조할 수 있다.