我正在使用React js应用程序,我已经安装了bootstrap并且知道如何使用它,但问题是React正在生成单个Web页面应用程序,这意味着,例如,如果我想要索引页的正文,背景颜色为蓝色,当我进行新的重定向时,它保持蓝色。
是否有任何方法可以将我的CSS属性控制为仅用于特定路由?
这里是一些代码:
import React, {Component} from 'react';
import '../style.css';
export default class Login extends Component {
render() {
return (
<div className="container">
<div className="row">
<div id="form-container-login" className="col-lg-6">
Hello from the log in Component
</div>
</div>
</div>
);
}
}
谢谢你!
将类添加到页面,而不是路由。
<BrowserRouter>
<div>
<Route exact path="/" component={HomePage} title="Home" />
<Route exact path="/one" component={ScreenOne} title="Support" />
<Route exact path="/two" component={ScreenTwo} title="Finance" />
</div>
</BrowserRouter>
class HomePage extends Component {
render() {
const { history, title } = this.props;
return (
<Glass
title={title}
history={history}
body={
<div className="BLUE_BG_CLASS">
<div className="container-fluid">
<div className="col-md-12">
<div className="header_container">
<h2>Overview</h2>
</div>
</div>
该正文将在所有页面中显示为全局样式,因为它随处可见。如果您希望特定页面的背景颜色不同,则必须为容器提供完整的高度/宽度,并为每个页面更改高度/宽度。如果要使用一个全局样式表,则还需要为每个页面使用单独的样式表和/或使用不同的className。希望这会有所帮助!
我认为CSS模块是您达到目的的最佳解决方案。
您可以在此article中找到一个示例,以及在react中使用css的其他不同方式。