質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1800閲覧

React+TypeScriptでのエラー

退会済みユーザー

退会済みユーザー

総合スコア0

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/02/01 14:26

概要

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

該当のコード

TypeScript

1// NotFound/index.tsx 2 3import React from 'react' 4import styled from 'styled-components' 5 6import { makeStyles } from '@material-ui/core/styles' 7 8const useStyles = makeStyles(theme => ({ 9 toolbar: theme.mixins.toolbar, 10})) 11 12const NotFound: React.FC = () => { 13 const classes = useStyles() 14 15 return ( 16 <Root> 17 <div className={classes.toolbar} /> 18 <H1>404 Not Found</H1> 19 <P>申し訳御座いません。</P> 20 <P>お探しのページは見つかりませんでした。</P> 21 </Root> 22 ) 23} 24 25 26const Root = styled.div` 27 padding-bottom: 50px; 28` 29 30const H1 = styled.h1` 31 text-align: center; 32 margin-top: 50px; 33` 34 35const P = styled.p` 36 text-align: center; 37` 38 39export 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" ] }

Dockerfile

1FROM node:latest 2 3WORKDIR /HEW2020/client 4COPY . . 5RUN yarn install --ignore-engines --network-timeout 1000000 6CMD ["yarn", "start"] 7EXPOSE 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

の様にすることで解決いたしました!
ありがとうございました!

投稿2020/02/02 10:11

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問