CODEWITHSUNDEEP
reactjstypescriptmaterial-uijss
Vivere
Vivere

Reputation: 2270

MUI v5 Typescript makeStyles returns never

I'm trying to migrate my components from MUI v4 to v5, and I've gotten to a point where I don't know how to migrate my makeStyles components.

Before, I had something like this that was working:

const useStyles = makeStyles((theme: Theme) => ({
  paper: {
    padding: theme.spacing(2),
    someMore: 'styles'
  }
}));
// ...

const Component: FC = () => {
  const theme = useTheme();
  const classes = useStyles(theme);

   return (
      <Paper elevation={3} className={classes.paper}>
         <Stuff />
      </Paper>
   )
}

Now I'm getting an error on the useStyles call:

This expression is not callable. Type 'never' has no call signatures.ts(2349)

What is the workaround in this case?

Upvotes: 14

Views: 9352

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81310

You cannot use makeStyles from @mui/material (you'll get an error if you do so) because it's been moved to @mui/styles as makeStyles is marked as deprecated. That's why the type is never; it's not there! The function is empty and its only purpose is to tell you where makeStyles is located now.

@mui/styles is a legacy package and it's not recommended for use in v5. See this answer to know more about the differences between the two of them. For alternatives, you can use styled/sx prop.

Upvotes: 16

Related Questions