[React] Emotion 적용하기 2 - @emotion/react (css-in-js)

👉🏻 설치

// 프레임워크에 구애받지 않는 가장 베이직한 패키지 (VanillaJS 등에서 사용)
npm i @emotion/css

// react 사용자에게 권장되는 패키지
npm i @emotion/react
yarn add @emotion/react

 

👉🏻 CSS Prop

Emotion 사용해서 css-in-js 스타일링을 하려면

CRA의 경우 코드에 /** @jsx jsx*/를, 아닐 경우 .babelrc에 아래와 같이 설정을 추가해준다.

 

- CRA Project

/** @jsx jsx */ 
import  { css , jsx }  from  '@emotion/react';

const color = 'darkgreen';

render (
  <div
    css={css`
       background-color: hotpink; 
       &:hover { color: ${ color }; }
    `}
  >
  </div>
 )

 

- Set .babelrc

{
  "presets": ["@emotion/babel-preset-css-prop"],
  "plugins": ...
}

코드 상단에 /** @jsx jsx */ 사용하지 않아도 됨.

 

 

👉🏻 사용 예시

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

const baseColor = css`
  color: hotpink;
`

cosnt base = css`
  margin: 5px;
`

render(
  <div css={base}>
    <div
      css={css`
        ${baseColor};
        background-color: #eee;
      `}
    >
      This is hotpink.
    </div>
  </div>
)

 

자식에게 적용하기

import { jsx } from '@emotion/react'

render(
  <div
    css={{
      color: 'darkorchid',
      '& .name': {
        color: 'orange'
      }
    }}
  >
    This is darkorchid.
    <div className="name">This is orange</div>
  </div>
)

 

hover, focus 등 적용하기

const hotpinkHoverOrFocus = css({
  '&:hover, &:focus': hotpink
})

 

미디어 쿼리 적용하기

<SideTab isMobile={isMobile} css={{'@media(max-width: 500px)': {display: 'none'}}}>

 

만약 브라우저별로 지원하지 않는 기능이 있을 수 있다면, 대체할 수 있는 속성을 추가

import { jsx } from '@emotion/react'

render(
  <div
    css={{
      background: [
        'red',
        'linear-gradient(#e66465, #9198e5)'
      ],
      height: 100
    }}
  >
    This has a gradient background in browsers that support
    gradients and is red in browsers that don't support
    gradients
  </div>
)

 

전역 스타일 추가

  <div>
    <Global
      styles={css`
        .some-class {
          color: hotpink !important;
        }
      `}
    />
    <Global
      styles={{
        '.some-class': {
          fontSize: 50,
          textAlign: 'center'
        }
      }}
    />
    <div className="some-class">This is hotpink now!</div>
  </div>

className="some-class"에게 Global styles css적용

 

 

Emotion - Object Styles