AppBar in Material ui is not reflecting in chrome browser-CodePudding

I am new to react.I am trying to display appbar using material ui in react project. but i can't see the output of it. I have the latest version of the material ui and react.

but the same code is running on codesand box ide on web. I don't know why it is happening this is my file structure: [file structure][1]

These are the versions of the node modules: [versions of my node modules][2]

The App.js file: [App.js][3]

this is expected: [Expected output screen][4]

but got this: [obtained output screen][5]

this is my index.js file: [index.js][6]

    import React from 'react';

import AppBar from '@material-ui/core/AppBar';
import Typography from '@material-ui/core/Typography';

import VideoPlayer  from './components/VideoPlayer';
import Notifications from "./components/Notifications";
import Options from "./components/Options";


const App=()=>{
    return(
        <div>
            <AppBar position="static" color="inherit">
                <Typography variant="h2" align="center">Video Chat</Typography>
                
                </AppBar>
                <VideoPlayer/>
                <Options>
                    <Notifications/>
                </Options>

        </div>);
}
export default App;

Thanks in advance for who has replied for my post. thank you for getting me out of this error. [1]: https://i.stack.imgur.com/ms4fI.png [2]: https://i.stack.imgur.com/yxLnC.png [3]: https://i.stack.imgur.com/4VfvN.png [4]: https://i.stack.imgur.com/dFDg0.png [5]: https://i.stack.imgur.com/MMK0E.jpg [6]: https://i.stack.imgur.com/0GWKQ.png

CodePudding user response：

This might be an import issue. Material UI is now MUI If you have the latest version of Material you might need to change the import.

import AppBar from '@mui/material/AppBar';
// or
import { AppBar } from '@mui/material';

CodePudding user response：

This should work

npm install @mui/material @emotion/react @emotion/styled

yarn add @mui/material @emotion/react @emotion/styled

App.js

import AppBar from '@mui/material/AppBar';
import Typography from '@mui/material/Typography';

const App=()=>{
    return(
        <div>
            <AppBar position="static" color="inherit">
                <Typography variant="h2" align="center">Video Chat</Typography>
            </AppBar>

        </div>);
}
export default App;