[React] styled component 활용

# Circle 컴포넌트에서 Box의 컴포넌트 css를 사용하려고 할때
이렇게 하면 Box의 모든걸 Circle에서도 쓴다.

 

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

---

# 어떤 component의 모든걸 같게 하고 싶지만, html 태그만 바꾸고 싶을때

const Btn = styled.button`
  color: tomato;
`;



<Btn>Login<Btn>
<Btn as="a">Go home<Btn>

이렇게 하면 button태그가 a태그로 바뀐다.

---

# animation적용할거면 keyframes 이용해야 한다.

const anim = keyframes`
 from {
   color: tomato;
}
 to {
    color: teal;
}
`;

const Btn = styled.button`
  animation: ${anim} 0.5s infinite;
`;

---

# 

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
 h1{
   color: tomato;
   &:hover {
       color: teal;
     }
   }
`;

---

#

const Title = styled.h1`
  color: tomato;
  &:hover {
    color: teal;
   }
`;

---

# Title이 Wrapper 안에 있을때

이런 형태일때

function App(){
   return (
      <Wrapper>
        <Title>Hello</Title>
      </Wrapper>
)
}

이렇게 쓸수있다.

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
    ${Title}:hover {          //Title위에 마우스를 올리면
      font-size: 99px;
   }
`;