0

概要

現在、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

1 件の回答 1

1

エラーメッセージに Overload と出てるかと思いますが、公式ドキュメントの通り makeStyles() には2通りの使用方法があります。

https://material-ui.com/styles/api/

const useStyles = makeStyles((theme: Theme) => createStyles({
  root: {
    backgroundColor: theme.color.red,
  },
}));
const useStyles = makeStyles({
  root: {
    backgroundColor: 'red',
    color: props => props.color,
  },
});

今回はthemeを引数に取る関数の方かと思いますので、 createStyles() を使って値(object)を返してください。

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

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

また、修正後にconst classes = useStyles()でコンパイルエラーが起きる場合には、以下のように書き換えてみてください。

    const classes = useStyles({})

makeStyles always requires props · Issue #16867 · mui-org/material-ui · GitHub
https://github.com/mui-org/material-ui/issues/16867#issuecomment-518201243

5
  • ご回答ありがとうございます!教えて頂いた通りに修正させていただいたのですが、今度は別のエラーが発生いたしました…。型 'CSSProperties' を型 'CSSProperties | CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)' に割り当てることはできません。 型 'CSSProperties' を型 'CreateCSSProperties<{}>' に割り当てることはできません。 型 'CSSProperties' のインデックス シグネチャがありません。
    – khkhkh
    Commented 2020年2月2日 7:01
  • すみません!情報不足でした!toolbarの上に上記の様なエラーが発生しています!tsの型エラーであることは理解しているのですが、解決方法がわかりません…。ご迷惑をお掛けしますが、ご回答いただけると幸いです。
    – khkhkh
    Commented 2020年2月2日 9:26
  • もしかしたらですが、新たに別の問題が出てきてる場合、この質問自体は一旦終わりにして、別の質問として立ててもらった方が良いかもしれないですね(この質問と回答が終わらなくなりそうなので)。その際はこの質問に書かれてるDocker周りのファイルの内容は要らないと思いますが(コンパイルエラーの問題っぽいので)。
    – harry0000
    Commented 2020年2月2日 9:44
  • ご回答ありがとうございました!恐縮ですが、一応、質問のリンクを貼らさせて頂きます。ja.stackoverflow.com/q/62724/32711
    – khkhkh
    Commented 2020年2月2日 10:09
  • 新しい質問を作成して頂いてありがとうございます。そちらの質問にも回答しましたので、ご確認頂ければ幸いです。
    – harry0000
    Commented 2020年2月2日 11:02

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

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