Por alguna razón, no puedo llamar a useStyles ya que falla lo siguiente:
This expression is not callable. Type 'never' has no call signatures.ts(2349) const useStyles: neverAquí está el código completo:
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;He creado algunas aplicaciones React diferentes antes y nunca me encontré con este problema.
¿Algunas ideas?
puedes resolverlo importando desde '@mui/styles'
import { makeStyles, createStyles } from '@mui/styles';El problema era que se estaba utilizando una versión más nueva de Material-UI.
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";en MU-V5
// con hilo hilo añadir @mui/styles
Importar desde '@mui/styles' import { makeStyles } from '@mui/styles';
Crea tu código
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>; }Esto debería funcionar, funcionó para mí.