React.js router different background image - reactjs

Question

I want to apply background image for specific component.
I used react-router-dom and my code is below.
[App.js]
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path="/" component={Login} />
<Route path="/home" component={Home} />
</div>
</Router>
);
}
}
export default App;
[Login.js]
import React, { Component } from 'react';
import './Login.css';
class Login extends Component {
render() {
return (
<div>
Login
</div>
);
}
}
export default Login;
[Login.css]
html {
background-color: red;
}
[Home.js]
import React, { Component } from 'react';
import './Home.css';
class Home extends Component {
render() {
return (
<div>
Home
</div>
);
}
}
export default Home;
[Home.css]
html {
background-color: blue;
}
I set the background-color of Login to red and Home to blue.
But not only Login.js but also Home.js's background color is blue.
How can I set the different background color for each components?

Answer 1

Apply styles to class
Assign a class to the outermost div in Login.js
class Login extends Component {
render() {
return (
<div className="login">
Login
</div>
);
}
}
export default Login;
Now apply styles to the classes
.home{
background-color:blue;
}
.login{
background-color:red;
}
If u want to apply background image for full page try this css..
.home {
background: url("image.jpg");
background-size: cover;
background-repeat: no-repeat;
}

Answer 2

Change the css to:
body {
background-color: red !important;
}
The background color property is set to the body tag, not the html tag. The !important will ensure that this style is applied over any other conflicts you may have.
--Edit--
To apply background colors to the individual components, you should add a class to each of the parent div, and style that class directly like so:
Note: Heights have been added to the styles to ensure 100% vertical fill of the browser, as per the OP's request. It is not required otherwise.
Login.js
import React, { Component } from 'react';
import './Login.css';
class Login extends Component {
render() {
return (
<div className="scene_login">
Login
</div>
);
}
}
export default Login;
Login.css
body, html {
height: 100%;
}
.scene_login {
height: 100%;
background-color: red;
}
Home.js
import React, { Component } from 'react';
import './Home.css';
class Home extends Component {
render() {
return (
<div className="scene__home">
Home
</div>
);
}
}
export default Home;
Home.css
body, html {
height: 100%;
}
.scene__home {
height: 100%;
background-color: blue;
}