스타일 컴포넌트는 스타일링이 된 컴포넌트란 의미로 CSS-in-JS 입니다.
CSS-in-JS ❓
자바스크립트 파일(코드) 안에서 css 문법을 사용 할 수 있는 라이브러리 입니다.
styled-components 를 살펴보면
공식 사이트 : https://styled-components.com/
Button 이라는 컴포넌트를 만드는데 styled 컴포넌트이며 a태그 입니다. 그리고 아래와 같은 스타일을 가진 컴포넌트란 뜻 입니다.
또한 자바스크립트에서 사용하기 때문에 props 를 사용해서 조건에 맞는 스타일링을 할 수 있습니다.
설치
스타일 컴포넌트는 CRA 에 포함되어 있지 않기 때문에 직접 설치를 해야 합니다.
예시
조건부 스타일링
1.
2.
확장 스타일링
중첩 스코프
