[英]React Typescript Material-UI useStyles not callable
For some reason, I cannot call useStyles as it errors out the following:出于某种原因,我不能调用 useStyles ,因为它会出现以下错误:
This expression is not callable. Type 'never' has no call signatures.ts(2349) const useStyles: never
Here is the full code:这是完整的代码:
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;
I've built a few different React applications before and never ran into this issue.我之前构建了一些不同的 React 应用程序,但从未遇到过这个问题。
Any ideas?有任何想法吗?
The issue was that a newer version of Material-UI is being used.问题是正在使用较新版本的 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";
I believe makeStyles
is being imported from the wrong package.我相信makeStyles
是从错误的包中导入的。
This这个
import { makeStyles, Theme } from "@material-ui/core";
Should be like应该像
import { makeStyles } from "@material-ui/core/styles";
您可以通过从 '@mui/styles' 导入来解决它
import { makeStyles, createStyles } from '@mui/styles';
on MU-V5在 MU-V5 上
// with yarn yarn add @mui/styles // 用yarn yarn 添加@mui/styles
Import from '@mui/styles' import { makeStyles } from '@mui/styles';从'@mui/styles' 导入 import { makeStyles } from '@mui/styles';
Build your code构建你的代码
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>;
}
This should works, it worked for me.这应该有效,它对我有用。
This is deprecated as of V5 Material-UI does not recommended the styles path for material UI.从 V5 开始不推荐使用此功能 Material-UI 不建议为材料 UI 使用 styles 路径。 Instead MUI want you to rely on the sx
attribute with CSS.相反,MUI 希望您依赖sx
属性与 CSS。
Hopes this helps anyone.希望这对任何人都有帮助。
The current recommended way https://mui.com/system/basics/目前推荐的方式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> ); }
This is the reason why: https://mui.com/system/styles/basics/#why-use-muis-styling-solution这就是为什么: https://mui.com/system/styles/basics/#why-use-muis-styling-solution
For info on the makeStyles
see documentation: @mui/styles (LEGACY)有关makeStyles
的信息,请参阅文档:@mui/styles (LEGACY)
On their documentation for styles: https://mui.com/system/styles/basics/在他们的 styles 文档中: https://mui.com/system/styles/basics/
⚠️ @mui/styles is the legacy styling solution for MUI. ⚠️ @mui/styles 是 MUI 的传统样式解决方案。 It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5.它依赖于 JSS 作为样式解决方案,它不再在 @mui/material 中使用,在 v5 中已弃用。 If you don't want to have both Emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.如果您不想在捆绑包中同时包含 Emotion 和 JSS,请参阅@mui/system 文档,这是推荐的替代方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.