javascript - Material UI 元素不会显示。一个棕褐色框显示而不是任何 MUI 元素。我怎样才能解决这个问题？

问题描述

我正在尝试使用 Material UI 创建一个简单的页眉、页脚和个人资料页面。

每当我尝试渲染任何类型的元素（菜单、应用程序栏、工具栏、图标按钮、选项卡、选项卡等）时，页面都会显示一个棕褐色框而不是元素本身。参见图片示例 -棕褐色框的图片：从左到右应该有一个图标按钮、一个登录按钮和 3 个标签，分别显示项目 1、2 或 3）。

功能工作正常。单击按钮时，我可以将链接添加到新页面。我只是看不到按钮或其文本。

下面是 Header 组件的样子：

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Profile from './Auth/Profile.jsx'

const Header = () => {
    return(
        <div >
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start"  color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" >
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>

        <Profile/> 
      </div>
    )
}
export default Header;

这是配置文件组件：

import React from 'react';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';


export default function Profile() {
  return (
    <Paper >
      <Tabs
        value={0}
        indicatorColor="primary"
        textColor="primary"
        centered
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>
    </Paper>
  );
}

我不确定我的代码中缺少什么，但我无法从我的元素中删除此覆盖。任何帮助表示赞赏！

有关更多上下文 -

这是我的 index.html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>KYODIE</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" src="assets/css/styles.scss"> 
  </head>

  <body>
    <!-- Hang React App Here -->
    <div id="root"></div>
    <!-- script for webpack and webpack-dev-server -->
    <script src="build/bundle.js"></script>
  </body>

</html>

还有我的 index.js -

/* Modules */
import React from 'react';
import { render } from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
/* Assets */
import '../css/styles.scss'; 
import '../images/working_together.png';
import 'typeface-roboto';
/* Components */
import App from '../../Components/App.jsx';
import ResultsPage from '../../Components/Results/ResultsPage.jsx';
import ResultsDetails from '../../Components/Results/ResultsDetails.jsx';
import About from '../../Components/About.jsx';
import Contact from '../../Components/Contact.jsx';
import Forum from '../../Components/Forum/Forum.jsx';
import Login from '../../Components/Auth/Login.jsx';
import SignUp from '../../Components/Auth/SignUp.jsx';
import Profile from '../../Components/Auth/Profile.jsx';

const routing = (
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route path="/searchSubmit" component={ResultsPage} />
      <Route path="/resultsDetails" component={ResultsDetails} />
      <Route path="/api/forum/:id" component={Forum} /> 
      <Route path="/login" component={Login} />
      <Route path="/signup" component={SignUp} />
      <Route path='/profile' component={Profile} />
    </div>
  </Router>
);



render(
  <div>
    {routing}
    </div>
  ,
  document.getElementById('root')
);

另外，我注释掉了我的 css 文件中的所有内容，以确保它不会影响我的代码。

标签： javascriptreactjsmaterial-ui

javascript - Material UI 元素不会显示。一个棕褐色框显示而不是任何 MUI 元素。我怎样才能解决这个问题？

问题描述

解决方案

推荐阅读