React Typescript Material-UI useStyles not callable

user_10625606 0
Viewed 11213

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?

material-ui typescript reactjs
5 Answers

you can solve it by importing from '@mui/styles'

import { makeStyles, createStyles } from '@mui/styles';
user_80745220

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";
user_106256060

on MU-V5

  1. Install the package // with npm npm install @mui/styles

// with yarn yarn add @mui/styles

  1. Import from '@mui/styles' import { makeStyles } from '@mui/styles';

  2. Build your code

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

This should works, it worked for me.

user_147502690

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";
user_68882390

This is deprecated as of V5 Material-UI does not recommended the styles path for material UI. Instead MUI want you to rely on the sx attribute with CSS.

Hopes this helps anyone.

The current recommended way https://mui.com/system/basics/

import * as React from "react";
import Button from "@mui/material/Button";

export default function Hook() {
  return (
    <Button
      sx={{
        border: 0,
        borderRadius: 3,
        boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
        color: "white",
        height: 48,
        padding: "0 30px",
      }}
    >
      Hook
    </Button>
  );
}

This is the reason why: https://mui.com/system/styles/basics/#why-use-muis-styling-solution

For info on the makeStyles see documentation: @mui/styles (LEGACY)

On their documentation for styles : https://mui.com/system/styles/basics/

⚠️ @mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

user_37672290
Related