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 /> ); } }
エラーは発生せず、正しく動作するようになりました。