概要
現在、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"
]
}