styled-components

문서

home

소계 글

styled-components 를 사용하는 8가지 이유 -번역

원문

styled-components - 벨로퍼트와 함께하는 모던 리액트

Example

Styled-components ThemeProvider를 활용한 스타일 환경 구축

theme 를 사용 크기 간격을 지정한게 인상 깊다

const calcRem = size => `${size / 16}rem`

const fontSizes = {
    small: calcRem(14),
    base: calcRem(16),
    lg: calcRem(18),
    xl: calcRem(20),
    xxl: calcRem(22),
    xxxl: calcRem(24),
    titleSize: calcRem(50),
}

const deviceSizes = {
    mobileS: '320px',
    mobileM: '375px',
    mobileL: '450px',
    tablet: '768px',
    tabletL: '1024px',
}

blog

medium.com

How styled-components works: A deep dive under the hood

use styled-components v3.3.3

BaseStyledComponent

Evaluating tagged template
Generating CSS class name. CSS 클래스 이름 생성 : MurmurHash 알고리즘
CSS Preprocessing. CSS 전처리 : stylis CSS preprocessor
Injecting CSS string into the page

styled-components renders an element with 3 class names:

this.props.className
componentId
generatedClassName

Performance tips

API

const Div = styled.div``
Div.styledComponentId // sc-fzoJus

utils

get css. css 가져오기

const Div = styled.div``

let result = []
Div.componentStyle?.rules.forEach((expr, index) => {
    const isFunc = typeof expr === 'function'
    const value = isFunc ? expr(props) : expr

    result.push(value)
})

CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유

CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교