Convert Style ts file from Material V4 to V5 - reactjs

Question

I am trying to migrate from material v4 to v5, the issue i am facing is previously I had a styles.ts file that I would import into my component and the start of the class looked like this:
import {
defaultFont,
primaryColor,
infoColor,
successColor,
warningColor,
dangerColor,
grayColor,
} from "../material-kit-pro-react";
import { makeStyles, Theme, createStyles } from "#material-ui/core";
export const typographyStyle = makeStyles((theme: Theme) => createStyles({
defaultFontStyle: {
I then updated the imports to the following:
import {
defaultFont,
primaryColor,
infoColor,
successColor,
warningColor,
dangerColor,
grayColor,
} from "../material-kit-pro-react";
import { makeStyles, Theme } from "#mui/material/styles";
import { createStyles } from '#mui/styles';
export const typographyStyle = makeStyles((theme: Theme) => createStyles({
This uses the #mui imports, but in my actual class I get the following error:
const typographyStyle: never
import typographyStyle
This expression is not callable.
Type 'never' has no call signatures.
My component is pretty basic and it looks like this:
import React from "react";
import { typographyStyle } from "assets/jss/material/typography/typographyStyle";
export interface TypographyProps {
children?: React.ReactNode;
}
export function Danger(props: TypographyProps) {
const classes = typographyStyle();
const { children } = props;
return (
<div className={classes.defaultFontStyle + " " + classes.dangerText}>
{children}
</div>
);
}
The error comes from const classes = typographyStyle();

Answer 1

That´s occuring because makeStyles import has been moved to #mui/styles, so your import must be:
import { Theme } from "#mui/material/styles";
import { createStyles, makeStyles } from "#mui/styles";
Also, according to MUI documentation:
#mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the #mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the #mui/system documentation which is the recommended alternative.
And
We have replaced JSS with emotion as a default styling solution while adding support for styled-components at the same time. We recommend migration your customization from JSS/makeStyles/withStyles to the new APIs: styled and the sx prop
So, with MUI v5 you should probably go with sx or styled instead makestyles. You can take a better look here and here.