When looking through some examples of writing Material UI code within React and using TypeScript (within a .tsx file to be precise) you might come across an error at runtime such as “Invalid hook call. Hooks can only be called inside of the body of a function component”.
Here’s an example of the code which causes this error
import React, { Component } from "react"; import AddIcon from "@material-ui/icons/Add"; import { Fab } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(theme => ({ fab: { margin: theme.spacing(1), }, })); const classes = useStyles(); export default class SampleComponent extends Component<{}, {}> { public render() { return ( <div> <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab> </div> ); } }
What we need to do is wrap the useStyles code in a function and replace the code which uses it, so for example
const SampleFab = () => { const classes = useStyles(); return <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab>; } export default class SampleComponent extends Component<{}, {}> { public render() { return ( <div> <SampleFab /> </div> ); } }
This also shows how we can create reusable components from just a simple function.