62726


## 概要

現在、React + TypeScript + Material-UIを用いた開発を行っていますが、エラーが発生致しました。Material-UIのCSS
in
JSを用いているのですが、その中の`toolbar`で下記の様なエラーが発生致しました。TSの型エラーだということは分かるのですが、解決方法は分からず…。  
自分なりに色々調べてみましたが、問題に該当する記事が見つけられませんでした…。  
どなたか解決方法のご教授お願い致します。

## エラーの内容

[code]

    型 'CSSProperties'を型 'CSSProperties | CreateCSSProperties <{}> | （（props：{}）=> CreateCSSProperties <{}>） 'に割り当てことはできません。型' CSSProperties 'を型' CreateCSSProperties <{}> 'にレジストリことはできません。
    
[/code]

## 該当するコード

[code]

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


CC BY-SA 4.0
2020-02-02T10:05:18.527
62724
2020-02-02T11:35:15.097
32711
question
reactjs typescript material-ui
TypeScript+React構成におけるMaterial-UIの型エラー


Material-UI 4.9.0で確認しましたが、以下のようにすることでコンパイルエラーが解消するような気がします。

[code]

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

コンパイルエラーになってた原因としては、`theme.mixins.toolbar`の型は
`React.CSSProperties`ですが、ここで期待されている型がMaterial-
uiの`CSSProperties`なので、型が異なってエラーになっています。

そのため、スプレッド構文を使用して`theme.mixins.toolbar`のfieldを全て渡してあげることで、コンパイルエラーが解消されます。

* * *

ちなみに以下のPull requestで`theme.mixins.toolbar`の型がMaterial-
uiの`CSSProperties`に変更されたので、次のバージョンなどからスプレッド構文を使わずに、そのまま渡せるように変わる(直る?)かもしれません。

[core] Fix mixins not being assignable as JSS styles by ririvas · Pull Request
#19491 · mui-org/material-ui  
<https://github.com/mui-org/material-ui/pull/19491>


CC BY-SA 4.0
2020-02-02T10:51:06.343
62726
2020-02-02T11:35:15.097
2020-02-02T11:35:15.097
3068
3068
62724
answer