🧥 Styled-Components란?

styled-components는 CSS-in-JS 라이브러리로, 이를 통해 자바스크립트로 작성된 파일에 스타일을 정의할 수 있게 해줍니다. React 프레임워크에서 사용되는 라이브러리입니다. npm을 통해 손쉽게 설치가 가능합니다.

$ npm i styled-component 

Styled-Components 예시

HTML 엘러먼트를 스타일링 할때나 component를 스타일링 할때 다르게 정의하게 됩니다.

HTML

import styled from "styled-components"


const StyledButton = styled.button`
	스타일 내용
`;

Component

import styled from "styled-components"
import Button from "./Button"

styled(Button)`

`;

props의 활용

일반적인 css처럼 width: 100, color: blue만 사용할수도 있지만 props를 통해 스타일링을 해야 제대로 styled-components를 사용했다 할 수 있습니다.

import styled from "styled-components"

render = (
<>
  <StyledButton color="blue"></StyledButton>
</>
)

const StyledButton = styled.button`
	width: 100;
	height: 50;
	background = ${(props) => props.background || "white" }
	color = ${(props) => props.color || "red"}
`;

위 처럼 or 연산자를 사용할수 있으며 삼항연산자도 가능합니다.