React.js 路由器不同的背景图片

Question

我想为特定组件应用背景图片。

我使用了 react-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;

[登录.js]

import React, { Component } from 'react';
import './Login.css';

class Login extends Component {
    render() {
        return (
            <div>
               Login
            </div>
        );
    }
}

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

我将 Login 的背景颜色设置为红色，将 Home 设置为蓝色。

但不仅Login.js，Home.js的背景颜色也是蓝色的。

如何为每个组件设置不同的背景颜色？

Answer 1

将样式应用于类

为 Login.js 中最外层的 div 分配一个类

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

背景颜色属性设置为body标签，而不是html标签。 !important 将确保将此样式应用于您可能遇到的任何其他冲突。

--编辑--

要将背景颜色应用到各个组件，您应该为每个父级 div 添加一个类，并像这样直接设置该类的样式：

注意：根据 OP 的要求，样式中已添加高度以确保 100% 垂直填充浏览器。否则不需要。

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