[Styled-components] 기능 정리

Expeding

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;
const Circle = styled(Box)`
  border-radius: 50px;
  

As

 <버튼 컴포넌트 as="a" href="링크">

버튼 컴포넌트의 스타일 속성을 유지한 채 링크 컴포넌트로 사용 가능

Attrs

styled-component가 컴포넌트를 설정할 때 속성 값을 설정할 수 있게 해줌
objecct로 넘겨줌

const Input = styled.input.attrs({ required: true })`
  background-color: tomato;
`;

Animation

styled-components에 animation 넣는 법

import styled, { keyframes } from "styled-components";

const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius:0px;
  }
  50% {
    border-radius:100px;
  }
  100%{
    transform:rotate(360deg);
    border-radius:0px;
  }
`;

const Box = styled.div`
  animation: ${rotationAnimation} 1s linear infinite;
`;

Selector

컴포넌트 안에 있는 태그를 target

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  span {
    font-size: 36px;
    &:hover {             // same span:hover
      font-size: 48px;
    }
    &:active {           // 클릭하고 있는 상태
      opacity: 0;
    }
  }
`;

컴포넌트 안에 있는 컴포넌트를 target

const Emoji = styled.span`
  font-size: 36px;
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  ${Emoji}:hover {
    font-size: 98px;
  }
`;