React - Material-UI - Typescript: makeStyles hook gives Invalid Hook Call inside a function component

Question

I really don't understand what am I doing wrong.

I am using the makeStyles hook as described inside the (javascript) documentation, and I am getting this Invalid Hook Call. I am using TypeScript 4.1.2, React 17.0.1 and React Types 17.0.0.

Here is the component code:

import React from 'react';
import { Theme, makeStyles } from '@material-ui/core/styles';

interface Props
{
    isVisible: boolean;
}

const useStyles = makeStyles( ( theme: Theme ) => ( {
    root: {
        background: 'red',
        height: 100,
    },
} ) );

const Nav: React.FC<Props> = ( props: Props ) =>
{
    const { isVisible } = props;

    const classes = useStyles( {} );

    return (
       <div className={classes.root}>

       </div>
    );
};

export default Nav;

Weird. I tried to run your `useStyle` hook in my React project and it's working. I don't use ts. Can you show some more information about error ? — Andrey RF, Mar 14 '21 at 20:51
It looks like the TS just messes up your `material-ui makeStyles` hook. Witch is weird. Because I am just calling a hook like I would normally do if I was using .jsx files in stead of .tsx — Andrei Nechita, Mar 14 '21 at 21:07
@AndreyRF, what do you think? Have you encountered this before? — Andrei Nechita, Mar 14 '21 at 21:14

score 1 · Answer 1 · answered Mar 14 '21 at 21:54

The answer was simpler than I would have thought. It seems that with "react-scripts":"4.0.3", the code works. I don't remember what version of cra I was using previously(I updated it before I checked), but with the latest version looks like it is working.

Here is what I did:

I created a new branch in my git.
I completely deleted the app
I typed in the terminal npm i -g create-react-app
I created a new react app: create-react-app <your file> --template typescript
Finally I added the dependencies and libraries: npm i @material-ui/core @material-ui/icons @material-ui/lab <other-libraries-here> ... @types/material-ui <other-types-here> ...
I changed, as I did before, the tsconfig.json file as the material-ui documentation suggests (I left the strictNullChecks to false as a personal preference)
I ran the start script using npm/yarn start.

I hope this answer helps somebody that encountered this problem! Happy hacking!

React - Material-UI - Typescript: makeStyles hook gives Invalid Hook Call inside a function component

1 Answers1