@emotion/core は @jsx jsx を書かなくても使える、の続き

3887 ワード
React TypeScript next.js emotion CSSinJS TypeScript テキストリンク

問題

emotion v11では上のようにはうまく動かない様子。

解決

  1. /** @jsx jsx */の除去
  2. 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にインテリセンスが効く。