問題
emotion v11では上のようにはうまく動かない様子。
解決
-
/** @jsx jsx */
の除去 -
Property 'css' does not exist on type ...
エラーの除去
/** @jsx jsx */
core->react
$ yarn remove @emotion/core
$ yarn add @emotion/react
$ yarn add -D @emotion/babel-preset-css-prop
.babelrc
{
"presets": ["@emotion/babel-preset-css-prop"]
}
オプション等あるが、基本これだけ。
Property 'css' does not exist on type ...
.d.ts相当のファイル
/// <reference types="@emotion/react/types/css-prop" />
自分はnextjsを使っているので、next-env.d.ts
に追加した。
サンプル
import { css } from "@emotion/react"
import React from "react"
interface Props {}
const test: React.FC<Props> = (props) => {
return (
<div
css={css`
p {
background-color: blueviolet;
}
span {
background-color: burlywood;
}
`}
>
<p>aaaaa</p>
<span>bbbbb</span>
</div>
)
}
export default test
個人的には
import { css } from "@emotion/react"
をしたほうが圧倒的に便利。cssにインテリセンスが効く。