Material-ui paper doesn't render on screen

Question

I have implemented the material-ui paper component in my homepage and everything is working as expected. But when I go to another page and get back to the homepage, the paper component is gone and only text is rendered, may I know what is the error?

Here's my code:

render() {
// const { showFixedMenu, hideFixedMenu } = this.props;
return (
  <div className={styles.Home}>
    <Helmet title="Home" />

    <Paper elevation={10} style={STYLE.paperStyle} >
      <Typography variant="headline" component="h3">
     hELLO WIORLS
      </Typography>
      <Typography component="p">
     Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </div>
);}

What is on the screen now: paper component not appearing on website

EDIT : I was able to solve my problem by using a library called 'Lazyload' which speed up the rendering of the web application. If anyone is facing similar issues, you can use this library to solve the problem.

Updated code (Working):

Main page

  render() {
        return (
          <LazyLoad>  <--- This library solve my problem 
            <HomeContent2 />
          </LazyLoad>
        );
      }
    }

HomeContent2

import type { Element } from 'react';
import React from 'react';
import { Image } from 'semantic-ui-react';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import InViewMonitor from 'react-inview-monitor';
import ProductContent1 from '../../components/ProductContent1/index';
import styles from '../../containers/Home/styles.scss';


const STYLE = {
  paperStyle: {
    width: '95%',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: '2%',
    height: '90vh',
    square: false,
  },
};

const HomeContent2 = (): Element<'div'> => (

  <div>
    <Paper elevation={6} style={STYLE.paperStyle} >

      <InViewMonitor   // for animation effect
        classNameNotInView="vis-hidden"
        classNameInView="animated fadeInUp"
      >
        <div className={styles.Content}>
          <div className={styles.left}>
            <Typography component="h1">
              <ProductContent1 product={0} />
            </Typography>
          </div>

          <div className={styles.right}>
            { /* Product 1 image goes here */ }
            <Image
              src="https://admin.neruti.com/wp-content/uploads/2018/06/more-info.png"
            />
          </div>
        </div>
      </InViewMonitor>
    </Paper>
  </div>
);


export default HomeContent2;

Answer 1

Here is the sample code

 import React from "react"; import ReactDOM from "react-dom"; import PropTypes from "prop-types"; import { withStyles } from "@material-ui/core/styles"; import Paper from "@material-ui/core/Paper"; import Typography from "@material-ui/core/Typography"; import "./styles.css"; function App() { return ( <div className="App"> <Paper elevation={4}> <Typography variant="headline" component="h3"> This is a sheet of paper. </Typography> <Typography component="p"> Paper can be used to build surface or other elements for your application. </Typography> </Paper> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

Make sure you user material-ui core library - https://material-ui.com/demos/paper/ I'm using @material-ui/core version - 1.2.2

Link to my sample example - https://codesandbox.io/s/myn083p6xx