styled-component

styled-component

=> 현재 가장 인기 있는 css-in-js 라이브러리로 많은 장점과 특징을 가지고 있다.

특징

• automatic critical css
• no class name bugs
• easier deletion of CSS
• simple dynamic styling
• pinless maintenance
• automatic vendor prefixing
  -외 등등

장점

• 컴포넌트 단위로 개발을 하는 만큼 스타일드컴포넌트를 이용하면 모듈화가 쉽다.(styled-"component")
• 유지보수에 용이하다.
• 코드 작성에 유리하다.

설치

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 속성