Reactjs routing css issue

I am trying to setup small reactjs application and I am using Router.

1. Login component - separate Css file
2. Logout component - separate css file

While landing into the login page css is reflecting but while navigating to logout page instead of logout css login component page css is reflecting. How to fix this issue.

Note: importing styles in each component

Do we don't have any options like while loading component will load this css file like configuration?

Login.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import "../Login/LoginStyle.css";

class Login extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                 <form className="box">
                    <h1>Login</h1>
                    <input type="text" name="" placeholder="Username" />
                    <input type="password" name="" placeholder="Password" />
                    <input type="button" name="" value="Login" />
                </form>
            </div>
        )
    }
}

export default Login

LoginStyle.css

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: red;
}

Logout.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import "../Logout/LogoutStyle.css";

class Logout extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                Logged out successfully
            </div>
        )
    }
}

export default Logout

LogoutStyle.css

body{
    background: grey;
}

navigating to the login page background color should be red and in logout component load background color should be grey. How to fix this?