MUI v4升级v5时Typescript下makeStyles返回never类型报错如何解决

MUI v5 已将makeStyles从核心包抽离为独立兼容包@mui/styles，原v4的导入路径、类型定义、调用方式都不再适配，才会出现TypeScript提示useStyles为never类型无法调用的报错。

方案1：兼容原有makeStyles写法（临时过渡用） #

• 第一步：安装独立兼容包

  npm install @mui/styles
  # 或yarn安装
  yarn add @mui/styles
  

• 第二步：修正导入路径与类型定义
  原来从@material-ui/core/styles导入的makeStyles改为从@mui/styles导入，同时为makeStyles指定Theme范型：

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

• 第三步：简化调用逻辑，无需主动传入theme参数
  v5版本的useStyles会自动注入当前主题，修改调用代码：

  // 删掉传入的theme参数
  const classes = useStyles();
  

方案2：适配v5官方推荐写法（推荐长期使用） #

@mui/styles是v5的过渡兼容方案，官方后续会废弃该能力，推荐用styled组件或sx属性替代原有写法：

用styled组件改写示例 #

import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';

const StyledPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(2),
  someMore: 'styles'
}));

const Component: FC = () => {
  return (
    <StyledPaper elevation={3}>
      <Stuff />
    </StyledPaper>
  )
}

用sx属性改写示例（适合样式较少的场景） #

const Component: FC = () => {
  return (
    <Paper 
      elevation={3} 
      sx={{
        padding: theme => theme.spacing(2),
        someMore: 'styles'
      }}
    >
      <Stuff />
    </Paper>
  )
}

内容的提问来源于stack exchange，提问作者Vivere