MUI v5 Typescript makeStyles returns never

Question

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?

Overwrought

Can you fork this codesandbox and recreate the error? – Socialminded

I already see some differences. I'm importing makeStyles and useTheme from @mui/material. I'm also seeing a StyledEngineProvider at root. I'm using ThemeProvider. Is there a difference? Which should I use? – Overwrought

Answer 1

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.

Socialminded

I will look into it on Monday! – Overwrought

Thanks for the insights! If the @mui/styles is legacy now, what package should I use? – Overwrought

@Overwrought MUI v5 uses @mui/system and have 2 new APIs styled/sx for that. See this – Socialminded