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?
you can solve it by importing from '@mui/styles'
import { makeStyles, createStyles } from '@mui/styles';
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";
on MU-V5
// with yarn yarn add @mui/styles
Import from '@mui/styles' import { makeStyles } from '@mui/styles';
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.