如何根据React组件更改背景图像？

Question

我想在不同的组件中使用不同的背景图像

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";


// SCREENS
import Login from './containers/Login';
import Register from './containers/Register';
import LandingPage from './containers/LandingPage';

// STYLE
import './styles/App.css';

class App extends Component {
  render() {
    return (
        <Router>
          <Route exact path='/' component={LandingPage} />
          <Route exact path='/login' component={Login} />
          <Route exact path='/register' component={Register} />
        </Router>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

index.css

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #282c34;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

LandingPage.js（我想更改背景图像但仅呈现index.css文件中定义的背景颜色的组件示例）

import React, { Component } from 'react';

import Logo from '../components/Logo';

import '../styles/Animations.css';
import "../styles/LandingPage.css";

class LandingPage extends Component {
  constructor(props){
    super(props);
    this.state = {}
  }
  render() {
    return (
      <div className="back center animate-opacity">
        <Logo/>
      </div>
    );
  }
}

export default LandingPage;

这是LandingPage.css。当我尝试将css标签应用为“背景图像”时，它只能覆盖屏幕总高度的80％。

.back{ 
    background-image: url("../assets/background/jj1.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

Animations.css

.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;animation:animatetop 1s}@keyframes animatetop{from{top:-60px;opacity:0} to{top:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-20px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-20px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;animation:animatebottom 2s}@keyframes animatebottom{from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}}