Tengo un archivo JS (reaccionar) que se parece a esto:

 import { Grid, TextField, makeStyles } from '@material-ui/core' import React from 'react' import {useState} from 'react' //remove this function and refresh. see magic. const useStyle = makeStyles(theme => ({ root:{ '& .MuiFormControl-root':{ width : '80%', margin : theme.spacing(.75) } } })) const initialFormValues = { id:0, name:'', username:'', email:'' } export default function EntryForm() { const [values, setvalues] = useState(initialFormValues) return ( <form className={useStyle().root}> <Grid container> <Grid item> <TextField size='small' variant='outlined' label='name' value={values.name} /> <TextField size='small' variant='outlined' label='username' value={values.username} /> <TextField size='small' variant='outlined' label='email' value={values.email} /> </Grid> <Grid item> </Grid> </Grid> </form> ) }

Esto funciona bien y, al invocarlo, los campos se representan junto con sus componentes principales.

Sin embargo, cambiando la primera línea a:

 import { Grid, TextField, makeStyles } from '@mui/material'

y actualizar el navegador hace que toda la página esté vacía. Aparentemente, esto sucede específicamente con makeStyles del uso de '@mui/material' . Usar Grid y Textfield desde '@mui/material' solo no causa eso.

¿Que está sucediendo aquí?