CSS in JS
JavaScript 파일 안에 스타일을 선언하는 방식
<--> CSS in CSS
styled-components
대표적인 CSS-in-JS 라이브러리
장점
- css모델을 컴포넌트 레벨로 추상화하는 모듈성. (문서레벨이 아니라)
- js환경을 최대한 활용. js와 css 사이의 상수와 함수를 공유
단점
- 러닝커브?
- 새로운 의존성
- css in css 비해 느린속도
기본 문법
1. tagged template literal 사용 (tag + 백틱)
const a = styled.div` //~~~ `;
2. Components 대문자로 시작
3. styled API를 사용해서 스타일링함
import styled from "styled-components";
동적 스타일링
단일 속성
props 사용하기.
다중 속성
import styled, {css} from "styled-components";
심화문법
자기 선택 문자 &
전역 스타일 GlobalStyle
1. styled-reset 라이브러리 用
2. reset 만들어 사용하기
CSS 전역 변수 사용 ThemeProvider
Context API 기반.
css에서 :root {}를 생성해서 변수를 사용하는것과 같음
스니펫 사용할것!
scp → ${props => props.};
scpt → ${({ theme }) => theme.};
스타일 상속
미디어 쿼리 in styled-components