概要
現在、React+TypeScriptを利用して開発を行っていますが、エラーが発生致しました。
Material-UIのCSS in JSでmakeStyles()
を用いているのですが、その引数のtheme
で下記の様なエラーが発生いたしました。
開発はDocker上で行っているのですが、元々は下記の様なエラーは発生していませんでした。しかし、docker-compose up -dをしてコンテナを再び立ち上げた途端、下記の様なエラーが発生いたしました。
自分なりに色々調べてみましたが解決せず…。
どなたか解決方法のご教授お願い致します。
エラーの内容
index.js:1 /HEW2020/client/src/containers/NotFound/index.tsx
TypeScript error in /HEW2020/client/src/containers/NotFound/index.tsx(6,30):
No overload matches this call.
Overload 1 of 2, '(style: Styles<Theme, {}, "toolbar">, options?: Pick<WithStylesOptions<Theme>, "flip" | "element" | "defaultTheme" | "name" | "media" | "meta" | "index" | "link" | "generateId" | "classNamePrefix"> | undefined): (props?: any) => Record<...>', gave the following error.
Argument of type '(theme: Theme) => { toolbar: CSSProperties; }' is not assignable to parameter of type 'Styles<Theme, {}, "toolbar">'.
Type '(theme: Theme) => { toolbar: CSSProperties; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "toolbar">'.
Call signature return types '{ toolbar: CSSProperties; }' and 'Record<"toolbar", CSSProperties | CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>' are incompatible.
The types of 'toolbar' are incompatible between these types.
Type 'CSSProperties' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
Type 'CSSProperties' is not assignable to type 'CreateCSSProperties<{}>'.
Index signature is missing in type 'CSSProperties'.
Overload 2 of 2, '(styles: Styles<Theme, {}, "toolbar">, options?: Pick<WithStylesOptions<Theme>, "flip" | "element" | "defaultTheme" | "name" | "media" | "meta" | "index" | "link" | "generateId" | "classNamePrefix"> | undefined): (props: {}) => Record<...>', gave the following error.
Argument of type '(theme: Theme) => { toolbar: CSSProperties; }' is not assignable to parameter of type 'Styles<Theme, {}, "toolbar">'.
Type '(theme: Theme) => { toolbar: CSSProperties; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "toolbar">'. TS2769
4 | import { makeStyles } from '@material-ui/core/styles'
5 |
> 6 | const useStyles = makeStyles(theme => ({
| ^
7 | toolbar: theme.mixins.toolbar,
8 | }))
9 |
該当のコード
// NotFound/index.tsx
import React from 'react'
import styled from 'styled-components'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(theme => ({
toolbar: theme.mixins.toolbar,
}))
const NotFound: React.FC = () => {
const classes = useStyles()
return (
<Root>
<div className={classes.toolbar} />
<H1>404 Not Found</H1>
<P>申し訳御座いません。</P>
<P>お探しのページは見つかりませんでした。</P>
</Root>
)
}
const Root = styled.div`
padding-bottom: 50px;
`
const H1 = styled.h1`
text-align: center;
margin-top: 50px;
`
const P = styled.p`
text-align: center;
`
export default NotFound
// 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"
]
}
FROM node:latest
WORKDIR /HEW2020/client
COPY . .
RUN yarn install --ignore-engines --network-timeout 1000000
CMD ["yarn", "start"]
EXPOSE 3000
version: "3"
services:
proxy:
build: ./proxy
volumes:
- ./proxy:/HEW2020/proxy
ports:
- "8080:8080"
links:
- "server"
container_name: "hew2020-proxy"
server:
build: ./server
volumes:
- ./server:/go/src/HEW2020/server
ports:
- "49200:49200"
- "49201:49201"
container_name: "hew2020-server"
client:
build: ./client
volumes:
- ./client:/HEW2020/client
ports:
- "3000:3000"
container_name: "hew2020-client"
db:
image: mysql:5.7
restart: always
volumes:
- ./mysql/data:/var/lib/mysql
- ./mysql/conf:/etc/mysql/conf.d
- ./mysql/initdb.d:/docker-entrypoint-initdb.d
environment:
MYSQL_ROOT_PASSWORD: secret
MYSQL_DATABASE: hew2020
MYSQL_USER: root
MYSQL_PASSWORD: secret
# TZ: 'Asia/Tokyo'
ports:
- "13306:3306"
container_name: hew2020-db