注册页样本:

.register{
background-image: linear-gradient(to right,#ff5722 0%,#ff9800 100%);
margin-top: 150px !important;
}

<div className="register">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-10 offset=md-1">
                                <div className="row">
                                    <div className="col-md-5 register-left">
                                        <h3>Join Us</h3>
                                        <p>Subscribe</p>
                                        <button className="btn btn-primary" type="button">About Us</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

默认布局示例(核心用户界面代码结构)
<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>

我遵循coreui代码结构。我的app.css是空的。我创建了register.css和applied background,但是
CSS只应用于容器部分而不是整个页面。

最佳答案

请参见示例如何为任何页面添加路由和自定义样式:
应用程序:

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;

在线示例:
html - 如何将背景图像仅应用于一个 react 页面而不是整个应用程序?-LMLPHP
更新
要使用背景渐变的全窗口div:
npm install style.css
使用style.css创建body { margin: 0, padding: 0 }后,在index.js中导入此文件:import "style.css";
更新登录和注册组件的样式后:
//...
style={{
  //...
  height: "100vh",
  margin: 0,
  padding: 0,
  // ....
}}
//...

关于html - 如何将背景图像仅应用于一个 react 页面而不是整个应用程序?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58352819/

10-11 12:46
查看更多