title: How to use different CSS files for different page with react js
body: <p>I am building my first react app and i have a problem ! I am trying to use different css files for different Route. But when i import a second css file(loginpage.css), the first page (homepage) is changing !</p>
  
  <p>How can i use a css file by page ? </p>
  
  <p>Thanks you for your help !</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import PropTypes from 'prop-types'
  import { Route } from 'react-router-dom';
  import HomePage  from './components/pages/HomePage';
  import LoginPage from './components/pages/LoginPage';
  import DashboardPage from './components/pages/DashboardPage';
  import SignupPage from './components/pages/SignupPage';
  import ConfirmationPage from './components/pages/ConfirmationPage';
  import UserRoute from './components/routes/UserRoute';
  import GuestRoute from './components/routes/GuestRoute';
  import './static/stylesheets/default.css';
  import './static/stylesheets/pandoc-code-highlight.css';
  import styles from './static/stylesheets/homepage.css';
  import styles1 from './static/stylesheets/loginpage.css';
  
  
  const App = ({ location }) =&gt; (
   &lt;div classname=""&gt;
    &lt;div classname={styles}&gt;
     &lt;Route location={location} path="/" exact component={HomePage} /&gt;
    &lt;/div&gt;
          &lt;div className={styles1.app}&gt;
              &lt;GuestRoute location={location} path="/login" exact component={LoginPage} /&gt;
          &lt;/div&gt;
    &lt;Route location={location} path="/confirmation/:token" exact component={ConfirmationPage} /&gt;
    &lt;GuestRoute location={location} path="/signup" exact component={SignupPage} /&gt;
    &lt;UserRoute location={location} path="/dashboard" exact component={DashboardPage} /&gt;
   &lt;/div&gt;
  );</code></pre>
  </div>
  </div>
  </p>