React Typescript Material-UI useStyles不可调用

4uqofj5v  于 2023-08-07  发布在  TypeScript
关注(0)|答案(6)|浏览(120)

由于某些原因,我不能调用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应用程序,从来没有遇到过这个问题。
有什么想法吗?

4nkexdtk

4nkexdtk1#

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

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

字符串

cnh2zyt3

cnh2zyt32#

在MU-V5上
1.使用npm npm install @mui/styles安装包//
//使用yarn添加@mui/styles

  1. Import from '@mui/styles' import { makeStyles } from '@mui/styles';
    1.构建您的代码
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>;
}

字符串
这应该行得通,它对我很有效。

ldioqlga

ldioqlga3#

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

字符串

35g0bw71

35g0bw714#

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

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

字符串
应该像

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

uinbv5nw

uinbv5nw5#

这在V5中已被弃用,Material-UI不建议使用材质UI的样式路径。相反,MUI希望您在CSS中依赖sx属性。
希望这能帮助任何人。
当前推荐方式https://mui.com/system/basics/

import * as React from "react";
import Button from "@mui/material/Button";

export default function Hook() {
  return (
    <Button
      sx={{
        border: 0,
        borderRadius: 3,
        boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
        color: "white",
        height: 48,
        padding: "0 30px",
      }}
    >
      Hook
    </Button>
  );
}

字符串
这就是为什么:https://mui.com/system/styles/basics/#why-use-muis-styling-solution
有关makeStyles的信息,请参阅文档:@mui/styles(LEGACY)
在他们的样式文档中:https://mui.com/system/styles/basics/
@️ mui/styles是MUI的遗留样式解决方案。它依赖于JSS作为样式化解决方案,这在@mui/material中不再使用,在v5中被弃用。如果你不想同时拥有Emotion和JSS,请参考@mui/system文档,这是推荐的替代方案。

gmol1639

gmol16396#

我已经创建了这个钩子和作品,相当不错。

useStyles.ts

import {makeStyles, Theme} from "@mui/material";

const styles = (theme: Theme) => {
  return {
    root: {
      backgroundColor: theme.palette.VampirismBlack.main
    }
  }
};

type StyleType = typeof styles

const useStyles : StyleType = makeStyles((theme: Theme) => (styles(theme)));

export default useStyles;

字符串
然后,你可以使用钩子:

import useStyles from "./useStyles.ts";
import {useTheme} from "@mui/material";
...
const theme = useTheme();
const classes = useStyles(theme);
...

相关问题