Html 如何只将背景图像应用到一个页面而不是整个应用程序？

注册页面示例：

。寄存器{
背景图像：线性梯度（向右，#ff5722 0%，#ff9800 100%）；
利润率顶部：150px！重要；
}

加入我们
订阅

关于我们

默认布局示例（核心用户界面代码结构）

标题
{routes.map（（route，idx）=>{
返回路线。组件(
(
)} />
)：（空）；
})}
{/*  */}
页脚

我遵循了corei的代码结构。我的app.css是空的。我创建了register.css和applicatedbackground，但是

---

CSS仅应用于容器部分而不是整个页面。

请参见如何为任何页面添加路由和自定义样式的示例：

应用程序：

---

你能把这个问题复制到JSFIDLE上吗？我不明白你的问题，你能解释更多吗？用组件实现单路由路由，并在组件寄存器中设置自定义cssAdd

import'style.css'在index.js上。参见示例。我是Sanbox
<div className="app">
            Header
            <div className="app-body">
                <main className="main">
                    <Suspense fallback={this.loading()}>
                        <Switch>
                            {routes.map((route, idx) => {
                                return route.component ? (
                                    <Route
                                        key={idx}
                                        path={route.path}
                                        exact={route.exact}
                                        name={route.name}
                                        render={props => (
                                            <route.component {...props} />
                                        )} />
                                ) : (null);
                            })}
                            {/* <Redirect from="/" to="/dashboard" /> */}
                        </Switch>
                    </Suspense>
                </main>
            </div>
            <Suspense fallback={this.loading()}>
                Footer
            </Suspense>
        </div>

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";
import Register from "./components/Register";

class App extends Component {
  render() {
    return (
      <Router>
        <Route
          render={({ location }) => (
            <div>
              <Switch key={location.key} location={location}>
                <Route exact path="/" component={Home} />
                <Route path="/login" component={Login} />
                <Route path="/register" component={Register} />
              </Switch>
            </div>
          )}
        />
      </Router>
    );
  }
}

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

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Home extends Component {
  render() {
    return (
      <div>
        home
        <br />
        <Link to="/register">register</Link>
        <br />
        <Link to="/login">login</Link>
      </div>
    );
  }
}
export default Home;

import React, { Component } from "react";

class Login extends Component {
  render() {
    return (
      <div
        // here add you custom style for page
        style={{
          backgroundImage: "linear-gradient(to right,#ff8733 0%,#fa1100 100%)",
          height: 100,
          marginTop: 10,
          textAlign: "center"
        }}
      >
        Login
      </div>
    );
  }
}
export default Login;

import React, { Component } from "react";

class Register extends Component {
  render() {
    return (
      <div
        // here add you custom style for page
        style={{
          backgroundImage: "linear-gradient(to right,#ff5722 0%,#ff9800 100%)",
          height: 100,
          marginTop: 10,
          textAlign: "center"
        }}
      >
        Register
      </div>
    );
  }
}
export default Register;

//...
style={{
  //...
  height: "100vh",
  margin: 0,
  padding: 0,
  // ....
}}
//...