import { AppBar, Toolbar, Typography } from '@material-ui/core' import React from 'react' import { makeStyles } from '@material-ui/styles'; const drawerWidth = 240; const useStyles = makeStyles((theme) => { return { appBar: { width: `calc(100% - ${drawerWidth}px)`, }, }}); function Dashboard() { const classes = useStyles(); return ( <div> <AppBar > <Toolbar> <Typography>Dashboard 1</Typography> </Toolbar> </AppBar> </div> ) } export default Dashboard

Error: error no detectado: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
2. Podrías estar rompiendo las Reglas de los Hooks
3. Es posible que tenga más de una copia de React en la misma aplicación

alguien puede ayudar a resolver esto