[REACT] Emotion 컴포넌트 선택자 사용시 에러

 

Emotion을 활용하다가 Component Selector(컴포넌트 선택자) 를 사용했더니 아래와 같은 오류가 발생했다.

 

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

 

 

 

Component Selector(컴포넌트 선택자)란 ?!

const Card = styled(face)`
  padding: 20px;
  width: 150px;
  height: 220px;
  margin-right: 15px;
  position: relative;
  float: left;
  perspective: 600px; /*3_카드가 돌아갈때 원근법을 주기 위해-앞 뒷면 돌아가는 걸 보기 위해 부모에게 적용*/

  &:hover ${CardFront} {
    /* 여기에 호버 시 변경되어야 할 스타일을 추가하세요 */
    transform: rotateY(180deg);
    /* 예: 배경색 변경 */
    background-color: lightblue;
  }
`;

 

위와같이 컴포넌트를 선택자사용하는 것

 

 

 

 

 

원래는 @emotion/babel-plugin 과 같은 플러그인을 활용해야 했지만 emotion 8 버전이상부터는 해당 플러그인이 필요가 없고 아래와 같이 styled를 불러오는 폴더를 변경시켜주면 된다.

 

 

import styled from "@emotion/styled/macro";