Emotion 가볍게 공부하기

 

이모션은 CSS-in-JS 라이브러리이다.

 React와도 함께 사용할 수 있다.

 

1. 설치

// 기본적으로 React환경에서 사용하는 Emotion
npm i @emotion/react

// Styled-Component 처럼 사용할 수 있는 Emotion
// @emotion/react가 설치되어 있어야 한다.
npm i @emotion/styled

 

해당 글에서는 styled 형식으로 컴포넌트를 생성하는 방법에 대해 작성할 예정이다.

 

2. Emotion Styled Component

컴포넌트와 구성요소 스타일링

기존에 사용했던 Styled-Component의 사용법과 비슷하게 컴포넌트나 요소를 생성할 수 있다.

import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
`

render(<Button>This my button component.</Button>)

 

props으로 변화 주기

styled안에 있는 함수 혹은 인수들은 만들어진 컴포넌트 혹은 요소들의 props로 스타일을 바꿀 수 있다.

import styled from '@emotion/styled'

const Button = styled.button`
  color: ${props => (props.primary ? 'hotpink' : 'turquoise')};
`

const Container = styled.div(props => ({
  display: 'flex',
  flexDirection: props.column &&'column'
}))

render(
  <Container column={true}>
    <Button>This is a regular button.</Button>
    <Button primary>This is a primary button.</Button>
  </Container>
)

 

아무 컴포넌트 스타일링 하기

styled는 컴포넌트가 className을 prop를 받는 다면 어떤 컴포넌트도 스타일링 할 수 있다.

import styled from '@emotion/styled'

const Basic = ({ className }) => <div className={className}>Some text</div>

const Fancy = styled(Basic)`
  color: hotpink;
`

render(<Fancy />)

 

 

다른 이모션 컴포넌트 타겟팅하기

이모션은 일반적인 CSS와 비슷하게 이모션 컴포넌트를 타겟팅할 수 있습니다.

이건 Styled-Component에서 영감을 받았다.

(@emotion/babel-plugin을 사용해야 적용할 수 있다)

import styled from '@emotion/styled'

const Child = styled.div`
  color: red;
`

const Parent = styled.div`
  ${Child} {
    color: green;
  }
`

render(
  <div>
    <Parent>
      <Child>Green because I am inside a Parent</Child>
    </Parent>
    <Child>Red because I am not inside a Parent</Child>
  </div>
)

컴포넌트의 선택자는 객체 형태로도 사용할 수 있다.

import styled from '@emotion/styled'

const Child = styled.div({
  color: 'red'
})

const Parent = styled.div({
  [Child]: {
    color: 'green'
  }
})

render(
  <div>
    <Parent>
      <Child>green</Child>
    </Parent>
    <Child>red</Child>
  </div>
)

 

객체 스타일링

glamorous에서 영감을 받은 API이다.

import styled from '@emotion/styled'

const H1 = styled.h1(
  {
    fontSize: 20
  },
  props => ({ color: props.color })
)

render(<H1 color="lightgreen">This is lightgreen.</H1>)

 

prop포워딩 커스터마이징

Emotion은 기본적으로 유효한 html속성은 모두 props로 전달한다.

shouldForwardProp 함수를 이용해 전달할 prop을 지정할 수 있다.

물론 @emotion/is-prop-valid를 사용해 유효한 prop인지를 확인할 수 도 있다.

import isPropValid from '@emotion/is-prop-valid'
import styled from '@emotion/styled'

const H1 = styled('h1', {
  shouldForwardProp: prop => isPropValid(prop) && prop !== 'color'
})(props => ({
  color: props.color
}))

render(<H1 color="lightgreen">This is lightgreen.</H1>)

 

동적 스타일 지정

동적으로 props를 기반으로 동적으로 스타일을 지정/사용할 수 있다.

import styled from '@emotion/styled'
import { css } from '@emotion/react'

const dynamicStyle = props =>
  css`
    color: ${props.color};
  `

const Container = styled.div`
  ${dynamicStyle};
`
render(<Container color="lightgreen">This is lightgreen.</Container>)

 

as prop

이모션 컴포넌트의 스타일을 사용하되 as로 전달된 prop의 요소로 재렌더링 할 수 있다.

import styled from '@emotion/styled'

const Button = styled.button`
  color: hotpink;
`

render(
  <Button as="a" href="https://github.com/emotion-js/emotion">
    Emotion on GitHub
  </Button>
)

이 API는 Styled-Component에서 영감을 받았다.

 

as prop은 오직 styled를 사용할 때만 사용할 수 있다.

as prop으로 요소를 바꿀 때, shouldForwardProp로 as를 prop으로 넘길 수 있다.

 

중첩 컴포넌트

& 중접 선택자를 이용할 수 있다.

import styled from '@emotion/styled'

const Example = styled('span')`
  color: lightgreen;

  & > strong {
    color: hotpink;
  }
`

render(
  <Example>
    This is <strong>nested</strong>.
  </Example>
)

 

반응형 컴포넌트

Styled-Component에서 @media를 이용해 반응형을 만든것 처럼 만들 수 있다.

import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
  @media(max-width: 100px){
    color: black;
  }
`

render(<Button>This my button component.</Button>)

 

 

참고 링크

Emotion – Styled Components

 

Emotion – Introduction

 

Emotion 소개 및 사용하기

 

styled-components 과 emotion, 도대체 차이가 뭔가?

 

[React] emotion과 styled-component의 차이