Changing to '@mui/material' makes the components not rendered

Question

I have a JS file (react) that looks like this:

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>
    )
}

This works fine, and invoked, the fields get rendered along with it's parent components.

However, changing first line to:

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

and refreshing the browser makes the whole page empty. Apparently, this happens specifically with makeStyles from '@mui/material' usage. Using Grid and Textfield from '@mui/material' only doesn't cause that.

What is happening here?

Answer 1

As per docs you should import makeStyles from @mui/styles.

Please try updating the import statement as:

import { makeStyles } from "@mui/styles";