[英]problem with @material-ui/core/styles: does not contain an export named 'makeStyles'
First of all I have to say that I have this problem for more than 2 days and I don't really know what to do more, I searched all over stack overflow and there where some questions that where quit exactly to my question, I tried them, and none of them worked, I searched for documentation and I followed, however I don't know if I was doing it right.首先,我不得不说我有这个问题超过 2 天了,我真的不知道该怎么做,我搜索了整个堆栈溢出,那里有一些问题完全退出了我的问题,我试过了他们,但他们都没有工作,我搜索了文档并跟随,但我不知道我是否做得对。
I have to say that I just started to learn React.不得不说,我刚开始学习 React。
Okay, so the error occurs when I use npm start
, in the terminal, I got a Failed to compile
, and an error is shown up in the browser:好的,所以当我使用
npm start
时出现错误,在终端中,我得到一个Failed to compile
,并且在浏览器中显示一个错误:
4:16-26 '@material-ui/core/styles' does not contain an export named 'makeStyles
4:16-26“@material-ui/core/styles”不包含名为“makeStyles”的导出
I have to mention that i named my js file as styles.js, later on i renamed it as Component.styles.js, because like that react would know it's a style file, i don't really know if it works, however i will let the source where i found it, if you want to check it: https://towardsdev.com/use-your-makestyles-7d347f9a3e96不得不提一下,我将我的 js 文件命名为 styles.js,后来我将其重命名为 Component.styles.js,因为这样 react 会知道它是一个样式文件,我真的不知道它是否有效,但是我如果您想检查它,将让我找到它的来源: https ://towardsdev.com/use-your-makestyles-7d347f9a3e96
Then i have a App.js where i import the js style, like this:然后我有一个 App.js,我在其中导入 js 样式,如下所示:
import useStyles from './yourComponent.styles.js';
This is my:这是我的:
yourComponent.styles.js: yourComponent.styles.js:
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
BarStylee: {
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 useStyles;
And this is my:这是我的:
App.js:应用程序.js:
import React from 'react';
import {Container,AppBar,Typography,Grow,Grid} from '@material-ui/core';
import pens from'./images/pencils.jpg';
import Posts from '../src/components/Posts/Posts.js';
import Form from '../src/components/Form/Form.js';
import useStyles from './yourComponent.styles.js';
const App = () => {
const classes = useStyles();
return (
<Container maxidth="lg">
<AppBar className={classes.BarStyle} position="static" color="inherit">
<Typography variant="h2" align="center">School</Typography>
<img src={pens} alt="pencils" height="150"/>
</AppBar>
<Grow in>
<Container>
<Grid container justify="space-between" alignItems="stretch" spacing={3}>
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={4}>
<Form />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
);
}
export default App;
Thanks!!谢谢!!
As of mui@5.x
makeStyles
has been moved into @material-ui/styles
package.从
mui@5.x
makeStyles
已移入@material-ui/styles
包中。 You should install @material-ui/styles@5
and rewrite your code as:您应该安装
@material-ui/styles@5
并将您的代码重写为:
import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles({...})
You can also use as follows也可以如下使用
import { makeStyles } from '@material-ui/styles/makeStyles';
const useStyles = makeStyles({...})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.