React Typescript Material-UI useStyles not callable-CodePudding

For some reason, I cannot call useStyles as it errors out the following:

This expression is not callable.
  Type 'never' has no call signatures.ts(2349)
const useStyles: never

Here is the full code:

import { makeStyles, Theme } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    backgroundColor: theme.palette.VampirismBlack.main,
  }
}));

const Header = (): JSX.Element => {
  const classes = useStyles();

  return (
    <AppBar position="static">
      <Toolbar variant="dense">
        <HeaderLogo width="125" height="75" />
        <IconButton>
          Home
        </IconButton>
        <IconButton>
          Changelog
        </IconButton>
        <IconButton>
          Tutorials
        </IconButton>
        <IconButton>
          Wiki
        </IconButton>
        <IconButton>
          Join Discord
        </IconButton>
      </Toolbar>
    </AppBar>
  )
}

export default Header;

I've built a few different React applications before and never ran into this issue.

Any ideas?

CodePudding user response：

I believe makeStyles is being imported from the wrong package.

This

import { makeStyles, Theme } from "@material-ui/core";

Should be like

import { makeStyles } from "@material-ui/core/styles";

CodePudding user response：

The issue was that a newer version of Material-UI is being used.

import AppBar from "@mui/material/AppBar";
import IconButton from '@mui/material/IconButton';
import { Theme } from '@mui/material/styles';
import Toolbar from '@mui/material/Toolbar';
import { makeStyles } from "@mui/styles";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";