注册页样本:
.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;
在线示例:
更新
要使用背景渐变的全窗口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/