Material-UI のtheme と emotion の theme を同じにする

やる理由

タイトル通りなのだが、環境構築しtheme をemotionで使おうとしたところ、使えず型が異なっていた。
そのため、does not exist などのエラーとなった。
↑ 以前。
現在は、Theme の型にないと怒られます。。
theme.spacing(2) などとしたときにspacing にエラーが出てきます。
これは私の設定のせいかもしれないです on VScode

環境

• Next.js
• Typescript

方法

• emotion/ mui の設定をする
• emotion のtheme の型をmui の型に変更する

インストール・設定

公式より
https://mui.com/material-ui/getting-started/installation/

MUI/ Material-ui の追加

// npm の場合
# npm install @mui/material @emotion/react @emotion/styled

// yarn の場合
# yarn add @mui/material @emotion/react @emotion/styled

インストール後、初期表示画面にて
next.js: _app.js
react.js: index.js

★Theme.ts でcreateTheme をている前提としてるので、自分で作成してね！

キャッシュしてくださるそうで、少し早くなるそうです。
なので、一応作っておく。
公式のサンプルgithubがこちらのリポジトリ をご確認ください

createEmotionCache.ts

import createCache from '@emotion/cache'

const isBrowser = typeof document !== 'undefined'

export const createEmotionCache = () => {
  let insertionPoint

  if (isBrowser) {
    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
      'meta[name="emotion-insertion-point"]',
    )
    insertionPoint = emotionInsertionPoint ?? undefined
  }

  return createCache({ key: 'mui-style', insertionPoint })
}

_app.tsx

import type { AppProps } from 'next/app'
import { ThemeProvider } from '@mui/material/styles'
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
import { theme } from '../config/Theme'
import { CacheProvider } from '@emotion/react'
import Head from 'next/head'
import { CssBaseline } from '@mui/material'
import { createEmotionCache } from '../CreateEmotionCache'

const cache = createEmotionCache()

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <CacheProvider value={cache}>
        <ThemeProvider theme={theme}>
          <EmotionThemeProvider theme={theme}>
            <CssBaseline />
            <Component {...pageProps} />
          </EmotionThemeProvider>
        </ThemeProvider>
      </CacheProvider>
    </>
  )
}

export default MyApp

mui と emotion のtheme の型を設定

myapp/src/types/emotion.d.ts

import { Theme as MUTheme } from "@mui/material/styles";
declare module "@emotion/react" {
  export interface Theme extends MUTheme {}
}

最後に

Theme の設定などあるけど、作りながら設定していけば良きかな。
Typescript のコードなんだろうけど、*.d.ts というファイルを今後理解しないといけない！