Material-UIでmakeStylesを使ったら”Invalid hook call”エラー

Reactのフレームワーク”Material UI”でスタイルシートをコンポーネントに渡すmakeStyles()メソッドを使ってみると、”Invalid hook call. Hooks can only be called inside of the body of a function component”とエラーが発生。

エラーが発生したコードではmakeStyles()でスタイルシートを定義し、クラスコンポーネントであるAppComponentで呼び出しを行っています。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  "view": {
    "width" : "300px",
    "height": "300px",
    "background" : "#eee"
  }
});

class AppComponent extends React.Component {
  const classes = useStyles();
  render() {
    return (
      <div className={classes.view}>
        <p>HELLO!</p>
      </div>
    );
  }
}

ReactDOM.render(
  <AppComponent />,
  document.getElementById('app')
);

エラーの解決方法

どうやらクラスコンポーネント内で フック関数であるuseStyle()を呼び出しているのがNGらしく、関数コンポーネント内で呼び出す必要があったようです。

そこでAppという名前の関数コンポーネントを別途用意し、そこでフック関数useStyle()を呼び出すよう変更してみます。

const App = () => {
  const classes = useStyles();
  return (
    <div className={classes.view}>
      <p>HELLO!</p>
    </div>
  )
};

class AppComponent extends React.Component {
  render() {
    return (
      <App />
    );
  }
}

エラーは発生せず、正しく動作するようになりました。

参考

http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component/