Invalid hook call using material-ui makeStyles in React

user_15033124 0
Viewed 224

I'm getting an invalid hook call error when I run my app in the browser. The error appears when I use makeStyles in my app ( I checked by removing it and the error goes away). Can someone help me find out what I'm doing wrong? Here is my code:

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

const useStyles = makeStyles({
    header: {
        background: '#C4C4C4',
        textAlign: 'center',
        boxShadow: '0px 2px 2px #A9A9A9',
        fontFamily: 'PT Sans Caption',
        fontSize: '36px',
        marginBottom: '20px',
        paddingTop: '20px',
        textTransform: 'uppercase',
        position: 'fixed',
        top: 0,
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
    },
});

const Header = (props) => {
    const classes = useStyles();
    const [ title ] = useState(props.title)

    return (
        <div className={classes.header}>{title}</div>
    );
};
export default Header;

Any help would be great!

material-ui react-hooks reactjs
2 Answers

i dont see problem in your code just for test change this : remove useState

        <div className={classes.header}>{props.title}</div>

or for test

<div className={classes.header}>title</div>
user_144485930

I'm not entirely sure what the issue was, but I solved it by running np install, exiting out of the browser, and running npm start. When the browser loaded back up, the error was gone.

user_150331240
Related