使用 Material-ui 版本 5 和 React 版本 18.01 创建新主题 - 使用“@mui/styles”时出错

Question

我正在使用 React V.18.01 和 Material-ui v.5，我的应用程序给我一个错误，解释如下，我想要一次代码审查，一旦我请初学者开发。我正在关注此视频以提交我的申请。uild。 https://www.youtube.com/watch?v=xIIJfmDnvPE&ab_channel=TheNetNinja 问：如何解决导入时出现@mui/styles的问题？这里发生了什么？

./src/App.js 中的错误 8:0-41

找不到模块：错误：无法解析“/home/flavio/CashFlowBr/cashflowbr/src”中的“@mui/styles”

./src/pages/Banks.js 中的错误 11:0-41

找不到模块：错误：无法解析“/home/flavio/CashFlowBr/cashflowbr/src/pages”中的“@mui/styles”

我正在粘贴我的文件代码，应该在哪里进行更改。

import Notes from './pages/Notes';
import Banks from './pages/Banks';
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { makeStyles } from '@mui/styles';
import { styled } from '@mui/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
    palette: {
      primary: {
        type: 'ligth',
        main: '#fefefe',
      },
      secondary: {
        main: '#f50057',
      },

    },
    props: {
      MuiTooltip: {
        arrow: true,
      },
    },
      typography: {
        fontFamily: 'Quicksand',
        fontWeigthLigth: 400,
        fontWeigthRegular: 500,
        fontWeigthMedium: 600,
        fontWeigthBold: 700,
      }
 
})


class App extends React.Component{
    render(){
      return(
        <ThemeProvider theme={ theme }>
          <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Notes}/>
            <Route path="/bancos" component={ Banks }/>
          </Switch>
         </BrowserRouter>
        </ThemeProvider>
      )
    }
};

export default App;

import React, { useState } from 'react';
import { Typography } from '@mui/material';
import { Button } from '@mui/material';
import { Container } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { makeStyles } from '@mui/styles';
import { blue } from '@mui/material/colors';
import { TextField } from '@mui/material';
import { createTheme } from '@mui/material/styles';

const theme = createTheme();
const useStyles = makeStyles((theme) ({
    field: {
        margimTop: 20,
        margimBottom: 20,
        display: "block",
    }
    
}));

export default function Bancos(){
    const classes = useStyles()
    const [name, setName] = useState('')
    const [address, setAddress] = useState('')
    const [nameError, setNameError] = useState(false)
    const [addressError, setAddressError] = useState(false)

    const handleSubmit = (e) => {
        e.preventDefault()
        setNameError(false)
        setAddressError(false)

        if(name == ''){
            setNameError(true)
        }

        if(address == ''){
            setAddressError(true)
        }

        if( name && address){
            console.log(name,address)
        }
    }

    return(
        <Container>
           <Typography  variant="h6" color="textSecondary" align="center" gutterBottom>
               Cadastrar um novo Banco
           </Typography>

            <form noValidate autoComplete="off" onSubmit={handleSubmit}>
                <TextField label="Nome do Banco" variant="outlined" color="secondary"
                fullWidth required className={classes.field} 
                onChange={(e) => setName(e.target.value)} error={nameError}/>
                 <TextField label="Endereço" variant="outlined" color="secondary"
                fullWidth required className={classes.field} 
                onChange={(e) => setAddress(e.target.value)} error={addressError}/>

                <Button type="submit" variant="contained" color="primary"
                 endIcon={<KeyboardArrowRightIcon />} 
                >
                 Salvar
                </Button>
            </form>

           
        </Container>
    )
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Console log error:

index.js:16 Uncaught Error: Cannot find module '@mui/styles'
    at webpackMissingModule (index.js:16:1)
    at Module../src/pages/Banks.js (index.js:16:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/App.js (interopRequireDefault.js:7:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/index.js (App.js:51:1)
webpackMissingModule @ index.js:16
./src/pages/Banks.js @ index.js:16
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/App.js @ interopRequireDefault.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/index.js @ App.js:51
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
localhost/:1 Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image)

Answer 1

我的第一反应是确保我已正确安装依赖项 - 尝试运行ning yarn 或 npm i（取决于您的项目）并检查终端中的输出没有显示任何错误。

更新： 我查看了您发布的 YouTube link 的 the source repo，它最初没有在 package.json 中列出 @mui。我没看过视频，但我猜想有一个运行类似 npm install @mui/material @emotion/react @emotion/styled 的步骤你还没有完成，所以模块还没有安装和可用。

使用 Material-ui 版本 5 和 React 版本 18.01 创建新主题 - 使用“@mui/styles”时出错

Creating a new theme with Material-ui Version 5 with react version 18.01 - Error using '@mui/styles'

javascript

reactjs

material-ui