IT技术 - 如何将背景图像应用于仅一个react页面而不是整个应用程序？ - 吾爱随笔录

如何将背景图像应用于仅一个react页面而不是整个应用程序？

IT技术 html css reactjs

2022-07-06 01:03:16

注册页面示例：

.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>

默认布局示例（Core_ui 代码结构）

<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并应用了背景，但 CSS 仅应用于容器部分而不是整页。

2个回答

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

应用程序：

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;

在线示例：

更新

拥有具有背景渐变的完整窗口 div： npm install style.css

创建style.css并body { margin: 0, padding: 0 }导入此文件后index.js：import "style.css";

更新登录和注册组件的样式后：

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

最简单的方法可能是使用 CSS 类。

在你的styles.css中添加这个类

.full-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  // or "height: auto" if page is large and you need to scrool down to see all content
}

.bg-home {
  background-image: url("./assets/images/black-linen.png");
}

在第一个<div>元素（从函数返回的地方）添加你的类

import `{ ButtonLogin, ButtonRegister }` from "../../components/Button";


function Home() {
  return (
    <div className='full-screen bg-home'>
      <div className='container'>
        <div className='buttons-div'>
          <ButtonLogin />
          <ButtonRegister />
        </div>
      </div>
    </div>
  )
}

export default Home

其它你可能感兴趣的问题

上一篇如何正确将此表单数据提交到 MongoDB？下一篇为什么 <Table/> 多次渲染时不显示复选框？