材质ui中的AppBar未反映在chrome浏览器中

mrwjdhj3  于 2022-12-16  发布在  Go
关注(0)|答案(1)|浏览(132)

我是新的React。我试图显示应用程序栏使用材料ui在React项目。但我看不到它的输出。我有最新版本的材料ui和React。
但是同样的代码在网络上的codesand box ide上运行。我不知道为什么会发生这种情况这是我的文件结构:[档案结构][1]
以下是节点模块的版本:[我的节点模块的版本][2]
App.js文件:[附录一][3]
这是预料之中的:[预期输出屏幕][4]
但我得到了这个[已取得输出画面][5]
这是我的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;

提前感谢回复我帖子的人。谢谢你让我摆脱这个错误。[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

dly7yett

dly7yett1#

这可能是导入问题。材料UI现在是MUI如果您有最新版本的材料,您可能需要更改导入。

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

相关问题