Styled-components css prop 현재 사이드프로젝트를 진행하면서 styled-components 에서 css prop 을 사용하고 있습니다. css prop 은 Styled components v4 부터 지원하게 되었는데요, 사실 @emotion 에서 사용하던 방식이라고 합니다. Styled-components 와 @emotion 이 경쟁관계를 가져가면서 css prop 을 추가적으로 지원하게 된 셈인데요, HTML 태그를 명시적으로 확인할 수 있고, 태그를 단순 반복으로 생성하는 styled 방식에서 벗어나 새로운 방식을 사용해보기 위해 도입하였습니다. // 이 코드는 props.theme.colors.text}; `} /> // 아래 코드와 동일합니다. import styled fro..

Styled-components css() 함수, 왜쓰지? styled-component 를 사용하면서 props 의 특정 상태에 따라 스타일링을 다르게 하는 경우가 있다. 그런데 이전에 다른 분들이 사용하시는 것을 보면 css() 함수와 함께 사용하는 경우를 여럿 봤다. import styled, { css } from 'styled-components'; const flexMixin = ({ jc, ai }: { jc?: string; ai?: string }) => css` display: flex; ${jc && css` justify-content: ${jc}; `} ${ai && css` align-items: ${ai}; `} `; const MyBox = styled.div` ${({ fl..