[css] styled-component 에 hover 효과 넣기

💄 styled-component 에 hover 적용하기

styled-component 적용하기

	import styled from 'styled-components'; 

버튼 컴포넌트 생성하기

todo list의 게시(add) 버튼을 생성하려고 한다.

const Btn = styled.button`
    width: 100px;
    height: 50px;
    color: whitesmoke;
    font-size: larger;
    font-weight: 800;
    background-color: #e85072;
    border-radius: 5px;
`;

hover 시 적용할 스타일 작성하기

const Btn = styled.button`
    width: 100px;
    height: 50px;
    color: whitesmoke;
    font-size: larger;
    font-weight: 800;
    background-color: #e85072;
    border-radius: 5px;
&:hover {
    background-color: #f7c6d0df;
    color: #e85072;
  }
`;

• &로 :hover속성을 이어준 후 코드블럭 안에 hover시 적용하고자 하는 스타일을 작성해주면 된다!