Emotion 사용해보기

설치하기

공식문서 참고

yarn add @emotion/react

or

npm install --save @emotion/react

위 명령어로 설치를 진행한다.

기본 사용법

Emotion의 기본적인 사용법은, css() 함수에 인자로 css요소를 넘기는 것이다.
객체로 넘기거나,

import { css } from "@emotion/react";

function MyComponent() {
  return (
    <div
      css={css({
        backgroundColor: "yellow",
      })}
    >
      노란색 영역
    </div>
  );
}

아래처럼 문자형 스타일로 넘기는 두가지 방법이 있다.

import { css } from "@emotion/react";

function MyComponent() {
  return (
    <div
      css={css`
        background-color: yellow;
      `}
    >
      노란색 영역
    </div>
  );
}

이모션 문서에서는 객체로 선언해서 넘기는 것을 권장한다고 함!
css() 함수 호출을 생략하고 바로 객체로 넘길 수 있으며, 타입스크립트를 사용하면 타입 체킹을 통해 버그도 줄일 수 있기 때문.

고정 스타일링

아래처럼 고정으로 스타일링을 해줄 수 있다.

function Button({ children }) {
  return (
    <button
      css={{
        borderRadius: "6px",
        border: "1px solid rgba(27, 31, 36, 0.15)",
        backgroundColor: "rgb(246, 248, 250)",
        color: "rgb(36, 41, 47)",
        fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
        fontWeight: "600",
        lineHeight: "20px",
        fontSize: "14px",
        padding: "5px 16px",
        textAlign: "center",
        cursor: "pointer",
        appearance: "none",
        userSelect: "none",
      }}
    >
      {children}
    </button>
  );
}

export default Button;

브라우저에서 소스 보기를 하면 자동으로 button요소에 이모션이 생성해준 클래스 이름이 들어가있다.

<button class="css-3dgxq9-Button">Button</button>

내부 스타일시트를 확인해보면, 더 자세하게 확인할 수 있는데
이모션이 자동으로 브라우저별로 필요한 css 속성을 추가한다는 것을 알 수 있다.

.css-3dgxq9-Button {
  border-radius: 6px;
  border: 1px solid rgba(27, 31, 36, 0.15);
  background-color: rgb(246, 248, 250);
  color: rgb(36, 41, 47);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 20px;
  font-size: 14px;
  padding: 5px 16px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

가변 스타일링

버튼의 color를 props로 받을 수 있다.
colors에 다양한 상태를 키와 값으로 설정해준 후,
props로 colors의 키를 받아온다.

const colors = {
  default: "rgb(36, 41, 47)",
  danger: "rgb(207, 34, 46)",
  outline: "rgb(9, 105, 218)",
};

function Button({ children, variant = "default" }) {
  return (
    <button
      css={{
        borderRadius: "6px",
        border: "1px solid rgba(27, 31, 36, 0.15)",
        backgroundColor: "rgb(246, 248, 250)",
        color: colors[variant],
        fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
        fontWeight: "600",
        lineHeight: "20px",
        fontSize: "14px",
        padding: "5px 16px",
        textAlign: "center",
        cursor: "pointer",
        appearance: "none",
        userSelect: "none",
      }}
    >
      {children}
    </button>
  );
}

export default Button;

import Button from "./Button";

function App() {
  return (
    <>
      <Button variant="default">Default</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="outline">Outline</Button>
    </>
  );
}

props의 속성을 여러개 받아오고 싶다면?
스타일링 속성을 지정해준 후,
스프레드 문법을 사용하여 스타일링 객체를 추가해주면 된다.

const sizeStyles = {
  sm: {
    fontSize: "12px",
    padding: "3px 12px",
  },
  md: {
    fontSize: "14px",
    padding: "5px 16px",
  },
  lg: {
    fontSize: "16px",
    padding: "9px 20px",
  },
};

function Button({ children, size = "md", variant = "default" }) {
  return (
    <button
      css={{
        borderRadius: "6px",
        border: "1px solid rgba(27, 31, 36, 0.15)",
        backgroundColor: "rgb(246, 248, 250)",
        color: colors[variant],
        fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
        fontWeight: "600",
        lineHeight: "20px",
        ...sizeStyles[size],
        textAlign: "center",
        cursor: "pointer",
        appearance: "none",
        userSelect: "none",
      }}
    >
      {children}
    </button>
  );
}

export default Button;

mport Button from "./Button";

function App() {
  return (
    <>
      <Button size="sm" variant="default">
        Default
      </Button>
    </>
  );
}

Styled로 사용하기

스타일드 형식으로 사용하려면 추가적으로 라이브러리를 설치해야 한다.

yarn add @emotion/styled

or 

npm install --save @emotion/styled

import styled from "@emotion/styled";

export function App() {
  return (
    <Container>
      안녕하세요
    </Container>
  );
}

const Container = styled.li`
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
`;

위와 같이 사용한다

출처

Emotion으로 React 컴포넌트 스타일하기 | 달레의 웹 프로그래밍
Emotion 공식문서