ReactJs 每页使用 CSS

Question

我正在使用 ReactJs 构建一个包含 3 个路由的简单应用程序：

"/" <- index.js
"/login" <- login.js
"/register" <- register.js

要正确查看这些页面，我需要导入 CSS-files。但是，如果我为“/login”路由导入 CSS-file，它也会加载到“/”路由中。

这是我的文件：

app.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import './App.css';
import Index from './pages/index';
import Login from './pages/login';
import './css/bootstrap.css';

class App extends Component {
  render() {
    return (
        <Router>
            <Switch>
                <Route exact path='/' component={Index} />
                <Route exact path='/login' component={Login} />
            </Switch>
        </Router>
    );
  }
}
export default App;

index.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import logo from '../logo.svg';
import '../App.css';

class Index extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                    <Link to={'/login'}>Login</Link>
                </p>
            </div>
        );
    }
}

export default Index;

和login.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../css/login.css';
import '../css/main.css';
import logo from '../img/s900x300.png';
import back from '../img/back.svg';
import view from '../img/view.svg';

export default class Login extends Component {
    render() {

        return (

            <div>
                <script async="" src="https://www.google-analytics.com/analytics.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

                <button className="back">
                    <a><img alt="" className="left" src={back}/></a>
                </button>

                <div className="background">
                </div>
                <div id="login" className="container login">

                    <img alt="" src={logo} />

                    <center><h5>&zwnj;</h5></center>
                    <input name="user" type="text" required placeholder="Benutzername oder Email"/>
                    <div className="password">
                        <input name="pw" required maxLength="64" type="password" placeholder="Passwort"/>
                        <button id="view_toggle">
                            <img alt="" src={view}/>
                        </button></div>
                    <form>
                        <button id="login" className="on">Login</button>
                    </form>

                    <center><b><a>back</a> | <Link to={'/register'}><a>Create account</a></Link></b></center>

                </div>

                <script src="/js/bootstrap.min.js"></script>
            </div>
        );
    }
}

例如：在我的 login.css 中，想要我的 body 的背景图片。但这个背景也适用于“/”。我怎样才能防止 css 在全球范围内使用？抱歉我的英语不好:)

Answer 1

为避免您的问题，您可以创建一个全局 css 文件，例如 style.css

然后你 link 它到你的 index.html

因为@Chase DeAnda 建议您可以为每个页面建立名称空间。

你的 style.css 应该是这样的

.login .myClass {...}
.login .anotherClass {...}
.main .myClass {...}
.main .anotherClass {...}

ReactJs 每页使用 CSS

ReactJs using CSS per page

node.js

reactjs

webpack

ecmascript-6

react-css-modules