How to use different css file in child of react route

I just started learning REACT, but i have a problem with React-route , problem is children use parent css, but how can we use fresh new css on child? not anything get from parent css?

I have a file structure like this:

---src
-----index.js
-----login.js
-----home.js
-----style.css

I imported 'style.css' in login.js but it continute to use in login.js, i want to design complete diffrent style in home.js,so i created home.css and put some element in there but it not cast over the style.css. Here is some of my code

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import Login from './login.js'
import New from './home.js'
const routing = (
    <Router>
        <div>
            <Route exact path="/" component={Login} />
            <Route path="/new" component={New} />
        </div>
    </Router>
  );
ReactDOM.render(routing, document.getElementById('root'));

my login.js problem is style.css have a body element that i can't change , if use a div in login.js and put a className it have background but have border, not full page.So i load localhost:3000/new it still have same background, i want it totally white ,like fresh page or have dirrent css, not use parent. So my question is :

how to make each child in route have unique style, not have it from it parent? or how can i do that with react? THANK ALL YOU GUY SO MUCH