React.js router different background image

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?

shiva · Accepted Answer · 2018-05-13 11:36:37Z

4

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

edited May 13, 2018 at 11:36

answered May 13, 2018 at 11:08

shiva

3,9612 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hide Over a year ago

Works perfectly. Thanks!

Hide Over a year ago

Anyway, It's a different matter, I apply background: url("image.jpg"). But It doesn't filled full screen. After height: 100%, is also doesn't work. How can I solve this issue?

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 13, 2018 at 11:07

TPHughes

1,64713 silver badges13 bronze badges

5 Comments

Agney Over a year ago

What about giving different background-color to different components which seems to be what the question is about.

TPHughes Over a year ago

I've updated my answer with a solution for this. I took the original approach of changing the body background colour as it looked as if this is what the OP was trying to achieve.

Hide Over a year ago

@TPHughes Works fine. Thanks! :)

Hide Over a year ago

@TPHughes Anyway, It's a different matter, I apply background: url("image.jpg"). But It doesn't filled full screen. After height: 100%, is also doesn't work. How can I solve this issue?

TPHughes Over a year ago

I've updated the answer with additional CSS that will ensure that the div is stretching to full height

Collectives™ on Stack Overflow

React.js router different background image

2 Answers 2

2 Comments

--Edit--

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

--Edit--

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related