=> 현재 가장 인기 있는 css-in-js 라이브러리로 많은 장점과 특징을 가지고 있다.
npm install --save styled-components
import styled from "styled-components";
<AButton width={100}> //width는 props
<span>hello</span>
</AButton>
const AButton = styled.button`
background-color: red;
span{color: red};
`;
// 버튼 불러와서 ``안에 스타일 작성,네스팅도 가능, AButton은 컴포넌트
// cf) styled-component에서 primary는 true
const Button = styled.button`
//내용
`
const BButton = styled(Button)`
//Button의 내용을 전부 가져오고 속성을 더 추가할 수 있음
`
const CButton = styled(Button.withComponent("a"))`
//Button의 내용을 전부 가져오고 해당 태그로 변경
`
const rotate = keyframes`
from{
}
to{
}
`
const RatateLogo = styled.img.attrs(()=>({
width: "80",
height: "80",
src: "/logo.svg",
}))`
animation: ${rotate} 4s linear infinite;
`
// attrs 속성