ReactJs using CSS per page - node.js

Question

I'm using ReactJs to build a simple app with 3 routes:
"/" <- index.js
"/login" <- login.js
"/register" <- register.js
to view these pages correctly, i need to import CSS-files.
But if i import the CSS-file for the "/login" route, it also gets loaded in the "/" route.
here are my files:
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;
and 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>‌</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>
);
}
}
for example: in my login.css want a background image for my body. but this background is also applied to "/". How can i prevent, that the css is used global? Sorry for my bad english :)

Answer 1

To avoid your issue, you can create a global css file like style.css
then you link it to your index.html
as #Chase DeAnda suggest you can establish namespace for each page.
your style.css should be something like
.login .myClass {...}
.login .anotherClass {...}
.main .myClass {...}
.main .anotherClass {...}