• トップページ
• Emotion

Emotion + Reactでcssプロップがないというエラーが出たときの対策

import {jsx,css} from '@emotion/core';

emotion11で破壊的変更が入ったのでimportするライブラリ名を以下の通りに変更します

import {jsx,css} from '@emotion/react'

create-react-app を使っている場合

tsconfig.jsonのcompilerOptionsでtypesを追加

"jsx": "react-jsx",
"types": ["@emotion/react/types/css-prop"],

またファイルの冒頭に以下のコメントアウトを入れます。GitHubに書いてありました。

/** @jsxRuntime classic */
/** @jsx jsx */

emotionでplaceholderのスタイルを変更する

const inputStyle = css`
&::placeholder{
font-family: serif;
}`

Emotionでエラーが出る場合に確認すべき点

CSS-in-JSのライブラリEmotionでエラーが出る場合に確認すべき点をメモしておきます

冒頭のコメントがない

/** @jsx jsx */ を忘れていませんか？

jsxコンポーネントの明示的配置

creat-react-appでEmotionとTypeScriptを後から導入した場合にエラー( jsx is not defined )が出る場合があります。

jsx; を各種importの下に追加して明示的に配置することで解決する場合があります。

詳細はこちらの記事にも書いています。

React + Emotion + TypeScriptでReferenceError: jsx is not definedのエラーが出る場合の対策

create-react-appで作ったReactのプロジェクトにCSS-in-JSのライブラリEmotionとTypeScriptを導入した際にエラーが出る場合の対策方法です。