CODEWITHSUNDEEP
reactjsreact-router-dom
Hide
Hide

Reputation: 3317

React.js router different background image

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?

Upvotes: 1

Views: 6406

Answers (2)

shiva
shiva

Reputation: 3941

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

Upvotes: 4

TPHughes
TPHughes

Reputation: 1627

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

Upvotes: 0

Related Questions