[React] emotion/styled 라이브러리에서 특정 색상 변수로 설정하기

emotion/styled 라이브러리를 사용할 때, 자주 사용하는 색상 코드가 복잡하거나 전역 스타일링(다크모드 등)을 적용하고 싶은 경우가 있다.
이때 색상을 변수명으로 지정하면 편리하게 사용할 수 있다.

1. styles 폴더 내에 공통 속성을 지정할 js 파일 생성

// styles/Common.js

export const Common = {
  colors: {
    mainColor01: "#323232",
    mainColor02: "#37334D",
    mainColor03: "#392F6C",
    mainColor04: "#62569F",
    mainColor05: "#9988BD",
    mainColor06: "#B8A2CF",

    lightGray01: "#D9D9D9",

    white01: "#ffffff",

    black01: "#000000",
  },
};

공통 속성을 지정할 파일이라 간단하게 Common.js로 생성했다.

2. 생성한 파일에 스타일링 옵션 지정

생성한 파일에는 위와 같이 색상을 담아준다.
색상 이외에 fontSize 등 다른 옵션도 지정이 가능하니까 전역 스타일링이 필요한 부분에 추가해서 쓰면 된다.

3. emotion 파일 내에서 불러오기

다른 Emotion.js 파일에서는 다음과 같이 불러와 사용할 수 있다.

// styles/ChatEmotion.js

import styled from "@emotion/styled";
import { Common } from "./Common";

export const ChatBtn = styled.div`
  background-color: ${Common.colors.mainColor04};
`

전역 스타일링 참 쉽죠?