每页使用 CSS 的 ReactJs答案

【问题标题】：ReactJs using CSS per page每页使用 CSS 的 ReactJs
【发布时间】：2018-07-12 01:42:04
【问题描述】：

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

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

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

这是我的文件：

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 中想要我的身体的背景图像。但是这个背景也适用于“/”。我怎样才能防止css在全球范围内使用？对不起我的英语不好:)

【问题讨论】：

这是因为您将所有 css 文件捆绑到一个 css 文件中。因此，如果您没有命名您的 css 类，您将看到它们在所有页面上都被使用。我的建议是使用唯一的 classNames 并在 .page-name 类下嵌套每页 css 规则。

标签： node.js reactjs webpack ecmascript-6 react-css-modules

【解决方案1】：

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

然后你把它链接到你的 index.html

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

你的 style.css 应该是这样的

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

【讨论】：