React.js маршрутизатор другой фоновое изображение

Question

Я хочу применить фоновое изображение для определенного компонента.

Я использовал response-router-dom, и мой код ниже.

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

Я установил красный цвет фона входа в систему, а синий - Home.

Но не только Login.js, но и Home.js - синий.

Как установить разные цвета фона для каждого компонента?

Answer 1

Применение стилей к классу

Назначение класса для внешнего элемента div в Login.js

class Login extends Component {
    render() {
        return (
            <div className="login">
               Login
            </div>
        );
    }
}

export default Login;

Теперь применяйте стили к классам

.home{
    background-color:blue;
    }

.login{
  background-color:red;
  }

Если вы хотите применить фоновое изображение для полной страницы, попробуйте этот CSS ..

.home {
    background: url("image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
 }

Answer 2

Измените CSS на:

body {
    background-color: red !important;
}

Свойство background color установлено для тега body, а не для html.!important гарантирует, что этот стиль будет применен к любым другим конфликтам, которые могут у вас возникнуть.

- Правка -

Чтобы применить цвета фона к отдельным компонентам, вы должны добавить класскаждому родительскому элементу div и стилизовать этот класс непосредственно следующим образом:

Примечание: высоты были добавлены в стили, чтобы обеспечить 100% вертикальное заполнение браузера в соответствии с запросом OP,В противном случае это не требуется.

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