如何将某些CSS的范围限制为特定的路由?

问题描述 投票:1回答:3

我正在使用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>

    );
  }
}

谢谢你!

css reactjs bootstrap-4
3个回答
1
投票

将类添加到页面,而不是路由。

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

0
投票

该正文将在所有页面中显示为全局样式,因为它随处可见。如果您希望特定页面的背景颜色不同,则必须为容器提供完整的高度/宽度,并为每个页面更改高度/宽度。如果要使用一个全局样式表,则还需要为每个页面使用单独的样式表和/或使用不同的className。希望这会有所帮助!


0
投票

我认为CSS模块是您达到目的的最佳解决方案。

您可以在此article中找到一个示例,以及在react中使用css的其他不同方式。

© www.soinside.com 2019 - 2024. All rights reserved.