找不到模塊：無法解析“/home/sanika/Desktop/Coding/React/my-forms/src/Components”中的“@material-ui/lab/TabContext”

Question

我是 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"
    ]
  }
}

Answer 1

在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';

Answer 2

看起來您實際上是在嘗試從 material-ui 的lab端導入一些組件，但是從您的包中我沒有看到它安裝在您的項目中。 要使用lab組件，您需要安裝單獨的依賴項。

https://material-ui.com/components/about-the-lab/

所以基本上需要安裝它。

npm install @material-ui/lab

Answer 3

如果您已經安裝， @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需要同樣的修正

Answer 4

您還需要安裝@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 。

Answer 5

您需要安裝@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