I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this:
Here is my code snippet from App.js:
import 'typeface-roboto';
import './css/App.css'
import React from 'react';
import ArticlePage from "./pages/article";
import ProfilePage from "./pages/profile";
import {MuiThemeProvider} from "material-ui";
import CssBaseline from "@material-ui/core/CssBaseline";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import NavBar from "./components/NavBar";
import HomePage from "./pages/home";
import InboxPage from "./pages/inbox";
function App() {
return (
<MuiThemeProvider>
<div className="App">
<Router>
<CssBaseline/>
<NavBar/>
<Switch>
<Route path="/profile">
<ProfilePage profileName={"Denis Ivanenko"} dateTime={"2017-02-14"}
userBio={"Example of User Bio. Here User can write about himself."}/>
</Route>
<Route path="/article">
<ArticlePage
imageSrc={"https://insights.dice.com/wp-content/uploads/2017/09/shutterstock_315465929.jpg"}
text={"...content goes here..."}
authorImageSrc={"...image source here..."}
...more props...
/>
</Route>
<Route path="/inbox">
<InboxPage name={"Denis"} surname={"Ivanenko"}
messages={[{...message object 1...},
{...message object 2...},
{...message object 3...}]}/>
</Route>
<Route path="/">
<HomePage/>
</Route>
</Switch>
</Router>
</div>
</MuiThemeProvider>
);
}
export default App;
The stylesheets used are defined in App.css:
.App {
background: #485563;
background: -webkit-linear-gradient(to right, #29323c, #485563);
background: linear-gradient(to right, #29323c, #485563);
height: 100%;
margin: 0;
padding: 0;
}
P.S. As I'm new to front-end development, please excuse me if this question seems basic. I suspect there might be an issue with setting the background color.
Can anyone assist me with this?
Since I am using React router in my app, below is the code for a specific page:
Inbox.js :
import React from "react";
import Paper from "@material-ui/core/Paper";
import Container from "@material-ui/core/Container";
import '../css/Inbox.css';
import {Divider} from "@material-ui/core";
import AvatarImage from "../components/AvatarImage";
export default class InboxPage extends React.Component {
render() {
const name = this.props.name;
const surname = this.props.surname;
const messages = this.props.messages;
return (
<Container>
<Paper>
<h1 className={"inboxHeader"}>{name}{" " + surname + "`s"} Inbox:</h1>
<Divider/>
{messages.map((message) =>
<Container>
<AvatarImage className={"AvatarImage"}/>
<h2>{message.author}:</h2>
<p>{message.text}</p>
<Divider/>
</Container>
)}
</Paper>
</Container>
);
}
}
Inbox.css :
.inboxHeader {
text-align: center;
}
h2, p, img {
display: inline-block;
}
.AvatarImage{
display: inline-block;
}
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}