1. 예제 1

• 부모태그(parent)에게 hover 시 자식태그(child)의 background color가 바뀌는 css 를 react의 styled components에서 사용시 SCSS 식으로 작성 가능하다.

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

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

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

• 아래와 같이 다른 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;
  }
`;