Material UI Elements won't show. A tan box shows instead of any MUI element. How can I fix this?

Question

I am trying to use Material UI to create a simple header, footer, and profile page.

Whenever I try to render any kind of element (Menu, Appbar, Toolbar, IconButton, Tab, Tabs, etc.) the page shows a tan box instead of the element itself. See pic for an example - picture of tan boxes : from left to right there should an icon button, a login button, and 3 tabs that say Item 1, 2 or 3).

Functionality works fine. I can add Links to new pages when I click a button. I just cant see the button or its text.

Here is what the Header component looks like:

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;

Here is the Profile component:

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>
  );
}

I'm not sure what I'm missing in my code but I am unable to remove this overlay from my elements. Any help is appreciated!

For more context -

Here is my 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>

And my 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')
);

Also, I commented out everything in my css file to be sure it's not affecting my code here.

Answer 1

There must be going on something else, because your code looks fine, as shown in the sandbox: https://codesandbox.io/s/long-sun-g4dvc?file=/src/App.js

For example, there may be other files (css, js, ...) that interfere with your code.

Material UI Elements won't show. A tan box shows instead of any MUI element. How can I fix this?

Question

1 answers

solution1
0 ACCPTED 2020-04-28 19:13:46

Material UI Elements won't show. A tan box shows instead of any MUI element. How can I fix this?

Question

1 answers

solution1 0 ACCPTED 2020-04-28 19:13:46

solution1
0 ACCPTED 2020-04-28 19:13:46