62697


## 概要

現在、React+TypeScriptを利用して開発を行っていますが、エラーが発生致しました。  
Material-UIのCSS in JSで`makeStyles()`を用いているのですが、その引数の`theme`で下記の様なエラーが発生いたしました。  
開発はDocker上で行っているのですが、元々は下記の様なエラーは発生していませんでした。しかし、docker-compose up
-dをしてコンテナを再び立ち上げた途端、下記の様なエラーが発生いたしました。  
自分なりに色々調べてみましたが解決せず…。  
どなたか解決方法のご教授お願い致します。

## エラーの内容

[code]

    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 |
    
[/code]

## 該当のコード

[code]

    // 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
    
[/code]

[code]

    // 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"
      ]
    }
    
[/code]

[code]

    FROM node:latest
    
    WORKDIR /HEW2020/client
    COPY . .
    RUN yarn install --ignore-engines --network-timeout 1000000
    CMD ["yarn", "start"]
    EXPOSE 3000
    
[/code]

[code]

    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
    
[/code]


CC BY-SA 4.0
2020-02-01T13:52:17.037
62694
2020-02-02T11:06:38.803
2020-02-02T11:06:38.803
3068
32711
question
reactjs typescript material-ui
Material-UIのmakeStyles関数でコンパイルエラーが発生する


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

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

>
[code]

>     const useStyles = makeStyles((theme: Theme) => createStyles({
>       root: {
>         backgroundColor: theme.color.red,
>       },
>     }));
>  
[/code]

>
[code]

>     const useStyles = makeStyles({
>       root: {
>         backgroundColor: 'red',
>         color: props => props.color,
>       },
>     });
>  
[/code]

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

[code]

    import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
    
    const useStyles = makeStyles((theme: Theme) => createStyles({
        toolbar: theme.mixins.toolbar,
    }))
    
[/code]

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

[code]

        const classes = useStyles({})
    
[/code]

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


CC BY-SA 4.0
2020-02-01T15:07:21.487
62697
2020-02-01T15:12:21.590
2020-02-01T15:12:21.590
3068
3068
62694
answer