Pseudo Selectors

styled component 안의 element를 선택하는 방법2

const Box = styled.div`
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 500px;
  animation: ${rotateKeyFrames} 1s linear infinite;
  ${Emoji}:hover {
    font-size: 185px;
  }
`;

export default function App() {
  return (
    <Father>
      <Box>
        <Emoji>😍</Emoji>
      </Box>
    </Father>
  );
}

span을
위와같은 식으로 Emoji 라는 컴포넌트 이름으로 지정하여 hover 속성을 적용시킨다.

hover 되면

Emoji가 커진다.