TIL: Emotion | basic

Emotion 은 css in js 로 scss 문법을 사용하는데

@emotion/styled 를 받으면 styled component 랑 똑같이 사용할 수 있다

대체로 styled component 보다 속도가 아주 근소하게 빠르고
emotion 은 css props 로 css 를 더 다양하게 사용할 수 있다는 장점이 있다
SSR 에서는 emotion 이 세팅 시 더 간편하다는데 그래서 많이 사용되는건지..

css prop

@emotion/react 의 기본 속성이지만
babel 을 직접 수정하지 않는다면
jsx pragma 를 사용한다

App.tsx 상단에 /** @jsx jsx */ 작성

Create React App 4와 같은 경우
/** @jsx jsx */ pragma가 작동하지 않을 수 있으므로
/** @jsxImportSource @emotion/react */ 로 작성

Object Styles

<div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen'
      }
    }}
  >
    This has a hotpink background.
</div>

String Styles

import { css } from '@emotion/react'

const color = 'darkgreen'

 <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
 </div>

styled 로 사용하는 것 보다 편하고
Object Styles 을 사용하면 tailwind 처럼 사용할 수 있을 것 같은데..
@emotion/styled 만큼 용량도 줄고

사용해보니 webstorm 에서 기본적으로 css prop 에 대해 css text 로 인식하지 못하여
String Style 로 사용하는 편이 좋을듯

typescript

css prop 을 typescript 에서 사용한다면 설정해줘야 한다

tsconfig.json

"compilerOptions": {
	...
    "jsxImportSource": "@emotion/react",
}