Next.js 11 + Typscript環境でemotionを使ってみた

emotion設定手順

インストール

$ npm i @emotion/react @emotion/babel-preset-css-prop

root直下.babelrc設定

.babelrc

{
  "presets": [
    "next/babel",
    "@emotion/babel-preset-css-prop"
  ],
  "plugins": [
    ["@emotion"]
  ]
}

エモーションエラー

そのまま使うとcssこのようなエラーでる。

index.js

型 '{ children: Element[]; css: any; }' を型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' に割り当てることはできません。
  プロパティ 'css' は型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' に存在しません。

エラーを防ぐためglobal.d.tsの設定が必要

root直下global.d.ts設定

global.d.ts

export {}
declare module 'react' {
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: any
  }
}

emotion使い方

基本使い方

index.js

import { css } from '@emotion/react'

//コンスト定義
const TestContainer = css`
  ...スタイル省略...
`
//コンスト定義Objectし
const Test ={
  container: css`
  ...スタイル省略...
  `
}

FunctionにPropsを引数で渡す

index.js

const TestContainer =(color: string)= css`
  color: ${color};
`
const Test ={
  container: (color: string)=> css`
    color: ${color};
  `
}