vite에서 emotion css props 사용하기

 

✔️ 에러 코드

Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.

해석 = Component selectors는 @emotion/babel-plugin, the swc Emotion plugin, 또는 다른 Emotion-aware 컴파일러로만 사용가능합니다. 

 

 

✔️ 에러가 나온 이유

vite 환경에서 emotion 라이브러리를 사용하는데 위와 같은 에러메세지가 나왔습니다.  😅

 

Component Selector는 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링을 하는 것을 의미하는데, emotion/babel-plugin를 따로 설정해야만 사용가능합니다. 

 

npm i로 설치를 하고, config에서 설정을 해야만 정상적으로 적용됩니다. 

 

 

 

✔️  해결 방법

 

1. @emotion/babel-plugin @emotion/react 설치하기

yarn add @emotion/babel-plugin @emotion/react

or 

npm i @emotion/babel-plugin @emotion/react

 

2. vite.config.ts or vite.config.js 파일 수정하기

 

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});

 

---

 

✔️ 해결 완료

위와 같이 설정하면 아래와 같이 emotion을 styled component처럼 커스텀 및 재사용 가능합니다

const Button = styled.button`
  border: none;
  border-radius: 8px;
  padding: 8px;
  margin: 0;
  background: black;
  color: white;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: tomato;
    cursor: pointer;
    transform: translateY(-2px);
  }
`;

const TopButton = styled.button`
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
  /* border: ${(props) => props.type === "filled" && "none"}; */
  background-color: ${(props) =>
    props.type === "filled" ? "black" : "transparent"};
  color: ${(props) => props.type === "filled" && "white"};
`;

 

 

참고 사이트)

https://github.com/storybookjs/builder-vite/issues/210

Using the css Prop of @emotion/react and apply babel plugin · Issue #210 · storybookjs/builder-vite

 

 

https://www.howdy-mj.me/css/emotionjs-intro

emotion.js 소개 및 사용법 (feat. CSS-in-JS)

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓