React Typescript Material-UI useStyles不可调用答案

【问题标题】：React Typescript Material-UI useStyles not callableReact Typescript Material-UI useStyles不可调用
【发布时间】：2021-11-18 13:47:01
【问题描述】：

由于某种原因，我无法调用 useStyles，因为它会出错：

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

这里是完整的代码：

import { makeStyles, Theme } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    backgroundColor: theme.palette.VampirismBlack.main,
  }
}));

const Header = (): JSX.Element => {
  const classes = useStyles();

  return (
    <AppBar position="static">
      <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>
  )
}

export default Header;

我之前构建了几个不同的 React 应用程序，但从未遇到过这个问题。

有什么想法吗？

【问题讨论】：

我没有收到那个错误，但我在theme.palette.VampirismBlack 上收到了一个错误。您是否将Theme 的定义从@material-ui/core" 扩展为包含该颜色？如果没有，您将需要使用自定义主题类型，而不是您导入的主题类型。

标签： reactjs typescript material-ui

【解决方案1】：

你可以通过从 '@mui/styles' 导入来解决它

import { makeStyles, createStyles } from '@mui/styles';

【讨论】：

这对我有用。谢谢

【解决方案2】：

问题在于正在使用更新版本的 Material-UI。

import AppBar from "@mui/material/AppBar";
import IconButton from '@mui/material/IconButton';
import { Theme } from '@mui/material/styles';
import Toolbar from '@mui/material/Toolbar';
import { makeStyles } from "@mui/styles";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";

【讨论】：

【解决方案3】：

我认为 makeStyles 是从错误的包中导入的。

这个

import { makeStyles, Theme } from "@material-ui/core";

应该是这样的

import { makeStyles } from "@material-ui/core/styles";

【讨论】：

另外，您是否同时使用 2 个版本？我可以看到mui 和material-ui 包。两者都是不同的版本。
问题是我安装了较新版本的 Material-UI。
较新版本已将 useStyle 或 styled 组件移至旧版包。请参考此处的文档。 mui.com/styles/advanced
我们不应该使用同一个库的2个版本，这势必会引起很多冲突。也请阅读迁移指南。 mui.com/guides/migration-v4

【解决方案4】：

在 MU-V5 上

安装包 // 使用 npm npm install @mui/styles

// 用纱线纱线添加@mui/styles

从“@mui/styles”导入从“@mui/styles”导入 { makeStyles }；
构建你的代码

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

这应该可行，它对我有用。

【讨论】：