문제 상황

부모 자식, 형제 관계가 아닌 서로 동 떨어진 컴포넌트에 영향받는 스타일링을 해야하는 상황

CSS

• 선택자를 통해 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자를 선택 할 수 있음
• 하지만 저기 멀리 다른 박스에 위치해있는 컴포넌트에 영향을 받고 싶다면 방법이 없다

Styled-component

const ChatBubbleContainer = styled.div`
  margin: 10px 0px 10px 0px;
  display: flex;
`;

const UtilBoxDelBtn = styled.button`
  display: none;
  ${ChatBubbleContainer}:hover & {
    display: block;
  }
`;

• 스타일 컴포넌트에서는 위와 같은 방법으로 떨어져있는 컴포넌트의 상황에 영향을 받게 할 수 있다.
• ChatBubbleContainer에 호버상황이 발생하면 display가 none 이었던 UtilBoxDelBtn는 display가 block으로 변하게 된다