ReactJs using CSS per page

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>&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>
        );
    }
}

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

It's because you are bundling all your css files down into one css file. So if you didn't namespace your css classes, you will see them being used on all pages. My suggestion is to use unique classNames and nest per page css rules under a .page-name class. — Chase DeAnda
– Chase DeAnda, Commented Feb 1, 2018 at 16:52

Leeroy_Wonkledge · Accepted Answer · 2018-02-01 16:59:51Z

2

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 {...}

answered Feb 1, 2018 at 16:59

Leeroy_Wonkledge

3512 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJs using CSS per page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related