React Typescript Material-UI useStyles 不可调用

Question

由于某种原因，我无法调用 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 应用程序，但从未遇到过这个问题。

有任何想法吗？

Answer 1

您可以通过从“@mui/styles”导入来解决它

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

Answer 2

在MU-V5上

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

// 用纱线添加@mui/styles

2. 从 '@mui/styles' 导入 import { makeStyles } from '@mui/styles';

3. 构建您的代码

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>;
}

这应该有效，它对我有用。

Answer 3

这已被弃用，因为 V5 Material-UI 不推荐材质 UI 的样式路径。相反，MUI 希望您依赖sxCSS 的属性。

\n

希望这对任何人都有帮助。

\n

目前推荐的方式\n https://mui.com/system/basics/

\n

import * as React from "react";\nimport Button from "@mui/material/Button";\n\nexport default function Hook() {\n  return (\n    <Button\n      sx={{\n        border: 0,\n        borderRadius: 3,\n        boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",\n        color: "white",\n        height: 48,\n        padding: "0 30px",\n      }}\n    >\n      Hook\n    </Button>\n  );\n}\n

\n

这就是原因：https://mui.com/system/styles/basics/#why-use-muis-styling-solution

\n\n

有关信息，请参阅makeStyles文档：\n@mui/styles (LEGACY)

\n

关于样式的文档：https ://mui.com/system/styles/basics/

\n

\n

\xe2\x9a\xa0\xef\xb8\x8f @mui/styles 是 MUI 的旧版样式解决方案。它依赖于 JSS 作为样式解决方案，@mui/material 中不再使用 JSS，在 v5 中已弃用。如果您不想在捆绑包中同时包含 Emotion 和 JSS，请参阅 @mui/system 文档，这是推荐的替代方案。

\n

\n

Answer 4

问题是正在使用较新版本的 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";

Answer 5

我相信makeStyles是从错误的包导入的。

这

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

应该像

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