Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui

Question

I am just started to learn reactjs using material-ui but getting this error when apply style to my component. My code:

const useStyles = makeStyles(theme => (         


        

Answer 1

material-ui makeStyles function only works inside function components, as it uses the new React Hooks APIs inside.

You have two options:

1. Convert your class component to a functional component.
2. Use a Higher Order Component as in material-ui docs

I personally recommend the first approach, as this is becoming the new standard in React development. This tutorial may help you get started with functional components and check the docs for React Hooks