[TIL] Emotion 1

emotion 설치

$ npm install @emotion/css
$ npm install @emotion/react

import

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

@jsx jsx를 꼭 적어주어야 @emotion/react가 실행된다.
단순히 주석이라고 생각하고 쓰지 않으면 안됨!

기본 구조

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

const divStyle = css`
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  padding: 32px;
  text-align: center;
  &:hover {
    color: white;
  }
`;

export default function App() {
  return <div css={divStyle}>Hover to change color.</div>;
}

기본적인 스타일은 styled-components 와 비슷하다.
위 스타일을 styled-components로 나타내면,

import styled from 'styled-components'

const DivStyle = styled.div`
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  padding: 32px;
  text-align: center;
  &:hover {
    color: white;
  }
`

export default function App() {
  return <DivStyle>Hover to change color.</DivStyle>
}

이런 형식.
그래서 styled-components처럼 사용하고 싶으면

$ npm install @emotion/styled @emotion/react

후에 상단에

import styled from '@emotion/styled'

넣어주고 위와 동일하게 사용해주면 된다.

재사용

스타일입힌것을 props로 언제든 재사용이 가능하다.

/** @jsxImportSource @emotion/react */

const P = props => (
  <p
    css={{
      margin: 0,
      fontSize: 12,
      lineHeight: '1.5',
      fontFamily: 'sans-serif',
      color: 'black'
    }}
    {...props} // <- props contains the `className` prop
  />
)

const ArticleText = props => (
  <P
    css={{
      fontSize: 14,
      fontFamily: 'Georgia, serif',
      color: 'darkgray'
    }}
    {...props} // <- props contains the `className` prop
  />
)

const SmallArticleText = props => (
  <ArticleText
    css={{
      fontSize: 10
    }}
    {...props} // <- props contains the `className` prop
  />
)

같은 CSS 속성이 있다면, 제일 최근 것으로 덮어씌워진다.
즉 ArticleText 의 폰트사이즈, 폰트, 색상을 사용하게 되고,
또 마지막으로 SmallArticleText의 폰트 사이즈가 사용될 것임.
그러니까 최종 css는

.css-result {
+ margin: 0;
- font-size: 12px;
+ line-height: 1.5;
- font-family: 'sans-serif';
- color: black;
- font-size: 14px,
+ font-family: Georgia, serif,
+ color: darkgray;
+ font-size: 10px;
}

가 될 것이다. ( + )