![](/img/trans.png)
[英]React - Material UI | Module not found: Can't resolve 'material-ui/Button'
[英]Module not found: Can't resolve '@material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'
我是 ReactJs 的新手,我正在尝试使用 react 的材料 UI 库来实现 TabContext,但我收到了上述错误。 我认为这是由于路径。 我尝试再次安装材料 UI,但没有帮助。 我正在分享我的代码。请检查
我的应用程序/src/App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './Components/Navbar';
import Form from './Components/Form';
function App() {
return (
<div className="App">
<h1>Hi</h1>
<Navbar></Navbar>
</div>
);
}
export default App;
我的应用程序/src/Components/Navbar.js
import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tab from '@material-ui/core/Tab';
import {TabContext} from '@material-ui/lab/TabContext';
import {TabList} from '@material-ui/lab/TabList';
import {TabPanel} from '@material-ui/lab/TabPanel';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
function Navbar() {
const classes = useStyles();
const [value, setValue] = React.useState('1');
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<TabContext value={value}>
<AppBar position="static">
<TabList onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" value="1" />
<Tab label="Item Two" value="2" />
<Tab label="Item Three" value="3" />
</TabList>
</AppBar>
<TabPanel value="1">Item One</TabPanel>
<TabPanel value="2">Item Two</TabPanel>
<TabPanel value="3">Item Three</TabPanel>
</TabContext>
</div>
);
}
export default Navbar
package.json
{
"name": "my-forms",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"material-ui": "^0.20.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
在my-app/src/Components/Navbar.js
尝试这个:
import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tab from '@material-ui/core/Tab';
import TabContext from '@material-ui/lab/TabContext';
import TabList from '@material-ui/lab/TabList';
import TabPanel from '@material-ui/lab/TabPanel';
看起来您实际上是在尝试从 material-ui 的lab
端导入一些组件,但是从您的包中我没有看到它安装在您的项目中。 要使用lab
组件,您需要安装单独的依赖项。
https://material-ui.com/components/about-the-lab/
所以基本上需要安装它。
npm install @material-ui/lab
如果您已经安装, @material-ui/lab
然后在Navbar.js
中更改您的导入
import TabContext from '@material-ui/lab/TabContext';
// or
import { TabContext } from '@material-ui/lab';
参考:- https://material-ui.com/api/tab-context/
您正在import {TabContext} from '@material-ui/lab/TabContext';
这是不正确的。 TabList
和TabPanel
需要同样的修正
您还需要安装@material-ui/lab
和@material-ui/core
。
npm install @material-ui/lab
npm install @material-ui/core
然后使用这些导入:
import Tab from '@material-ui/core/Tab';
import TabContext from '@material-ui/lab/TabContext';
import TabList from '@material-ui/lab/TabList';
import TabPanel from '@material-ui/lab/TabPanel';
以上测试了@material-ui/core v4.12
和@material-ui/lab v4.0
。
您需要安装@mui/lab
和@mui/material
。
https: //mui.com/material-ui/about-the-lab/#installation
npm install @mui/lab @mui/material
对于纱线:
yarn add @mui/lab @mui/material
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.