[🐋 CSS] Styled Components 컴포넌트 hover 속성 적용하기

마우스를 버튼 위에 갖다되면 색상이 바뀌도록 hover 속성을 적용하고자 한다.

기존에 제작한 styled component를 확장시키는 방식이 아니라
&:hover { } 내부에 속성을 추가시켜주는 방식이다.

import styled from "styled-components";

const Practice = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: pink;
  transition: 0.5s;

  // hover에 적용시킬 속성 
  &:hover {
    background: purple;
    color: white;
  }
`;

export default function App() {
  return <Practice>Practice!</Practice>;
}