어제 이거 때문에 개고생했다.
import { css } from "@emotion/react";
const index => () => (
<div
css={css`blablabla`}
>Test</div>
);
위 처럼 적으면, Chrome devtools 에서 다음처럼 변하였다...
<div style="{Object object}">
이유는 emotion
은 React.createElement
대신에 jsx
함수를 사용하기 때문에 babel
설정이 이루어져야 한다
해당부분에 대해서는 JSX
에서 CSS
를 사용하는데 nextjs
가 zero-config
인 framwork
라 bable
설정으로 emotion jsx
를 사용못하기에 생기는 상황인것 같다.
실제로 Emotion 에서 다음처럼 이야기 하고 있다.
css
prop 을 사용할때,source file
가장 위쪽에jsx pragma
를 설정해!!
이 옵션은babel configuration
을 설정할 수 없는 프로젝트에css prop
기능을testing
하는제 적합해!!
라고 말한다.
또한
예를 들어
Create React App 4
같은new JSX runtimes
를 이미 사용한다면,
/** @jsx jsx */
paragma 는 작동하지 않아!
/** @jsxImportSource @emotion/react
를 대신해서 사용해야해!!
라고 말한다.
그러면서 제외하면 css
가 [Object Object]
로 render
될것이라고 말한다.
nextjs
에서 emotion
의 css
사용시 JSX Pragma
붙이도록 하자 ㅜㅜ