React Typescript Material-UI中useStyles为never类型不可调用错误问询

• 核心原因是你混用了两个不同版本的Material UI依赖：@material-ui/core是v4版本的包名，@mui/material是v5版本的包名，两个版本的API、类型定义完全不兼容，导致makeStyles的返回值被TS推导为never类型，无法正常调用。
• 额外注意：v5版本默认已不推荐使用makeStyles方案，如果你确定使用v5版本，官方更推荐styled组件或者sx属性方案；如果坚持要在v5中使用JSS样式方案，需要单独安装@mui/styles依赖，且不能和v4的@material-ui/core共存。

你可以根据自己的技术选型，选择以下任意一种统一版本的方案即可：

方案1：统一使用MUI v4 #

• 卸载所有v5版本的依赖：

npm uninstall @mui/material @emotion/react @emotion/styled
# yarn用户执行
yarn remove @mui/material @emotion/react @emotion/styled

• 将所有@mui/material的导入替换为@material-ui/core的导入：

// 修改前
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
// 修改后
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";

• 确认theme.palette.VampirismBlack是你已经在自定义主题中正确注册的调色板字段，且对应的TS类型定义已经补充完整。

方案2：统一使用MUI v5 #

• 卸载所有v4版本的依赖：

npm uninstall @material-ui/core
# yarn用户执行
yarn remove @material-ui/core

子方案2.1：继续使用makeStyles #

• 单独安装v5版本的JSS样式依赖：

npm install @mui/styles
# yarn用户执行
yarn add @mui/styles

• 修改makeStyles和Theme的导入路径：

// 修改前
import { makeStyles, Theme } from "@material-ui/core";
// 修改后
import { makeStyles } from "@mui/styles";
import type { Theme } from "@mui/material/styles";

子方案2.2：切换为v5官方推荐的sx方案 #

可以直接删除makeStyles相关代码，修改组件写法即可，无需额外安装依赖：

const Header = (): JSX.Element => {
  return (
    <AppBar position="static" sx={{ backgroundColor: (theme) => theme.palette.VampirismBlack.main }}>
      <Toolbar variant="dense">
        <HeaderLogo width="125" height="75" />
        <IconButton>
          Home
        </IconButton>
        <IconButton>
          Changelog
        </IconButton>
        <IconButton>
          Tutorials
        </IconButton>
        <IconButton>
          Wiki
        </IconButton>
        <IconButton>
          Join Discord
        </IconButton>
      </Toolbar>
    </AppBar>
  )
}

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