0

概要

現在、React + TypeScript + Material-UIを用いた開発を行っていますが、エラーが発生致しました。Material-UIのCSS in JSを用いているのですが、その中のtoolbarで下記の様なエラーが発生致しました。TSの型エラーだということは分かるのですが、解決方法は分からず…。
自分なりに色々調べてみましたが、問題に該当する記事が見つけられませんでした…。
どなたか解決方法のご教授お願い致します。

エラーの内容

型 'CSSProperties'を型 'CSSProperties | CreateCSSProperties <{}> | ((props:{})=> CreateCSSProperties <{}>) 'に割り当てことはできません。型' CSSProperties 'を型' CreateCSSProperties <{}> 'にレジストリことはできません。

該当するコード

import React from 'react'
import styled from 'styled-components'

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'

// ここのtoolbarでエラーが発生
const useStyles = makeStyles((theme: Theme) => createStyles({
  toolbar: theme.mixins.toolbar,
}))

const TopPage: React.FC = () => {
  const classes = useStyles()

  return (
    <Root>
    // ここのtoolbarでエラーが発生
      <div className={classes.toolbar} />
      <H1>~ No Checkouts. ~</H1>
      <H1>自動販売機</H1>
    </Root>
  )
}

const Root = styled.div`
  padding-bottom: 50px;
`

const H1 = styled.h1`
  text-align: center;
`

export default TopPage
// tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "downlevelIteration": true
  },
  "include": [
    "src"
  ]
}
1
  • 1
    次回以降の質問からで大丈夫ですが、質問される場合はライブラリやTypeScriptのバージョンなどを質問に書かれた方が良いと思いました。(Material-UIなどはバージョンによっても違いがあったりするので)
    – harry0000
    Commented 2020年2月2日 11:26

1 件の回答 1

1

Material-UI 4.9.0で確認しましたが、以下のようにすることでコンパイルエラーが解消するような気がします。

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'

const useStyles = makeStyles((theme: Theme) => createStyles({
  toolbar: {
    ...theme.mixins.toolbar
  },
}))

コンパイルエラーになってた原因としては、theme.mixins.toolbarの型は React.CSSPropertiesですが、ここで期待されている型がMaterial-uiのCSSPropertiesなので、型が異なってエラーになっています。

そのため、スプレッド構文を使用してtheme.mixins.toolbarのfieldを全て渡してあげることで、コンパイルエラーが解消されます。


ちなみに以下のPull requestでtheme.mixins.toolbarの型がMaterial-uiのCSSPropertiesに変更されたので、次のバージョンなどからスプレッド構文を使わずに、そのまま渡せるように変わる(直る?)かもしれません。

[core] Fix mixins not being assignable as JSS styles by ririvas · Pull Request #19491 · mui-org/material-ui
https://github.com/mui-org/material-ui/pull/19491

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。