Multiple stylesheets issue using React - css

Question

I am new to react, I have an issue on how to maintain stylesheets in react.
For Eg: If I have box structures in different components with the same class names which are import to Page-A & Page-B, I maintained different stylesheets & appended those to their respective pages. If I change the style properties for Page-B in respective stylesheet using the same class name, changes are reflecting in both the Page-A & Page-B pages, which is suppose to reflect in Page-B only. Please help to solve this.
Page-A<div class="wrapper">Headline<div>.wrapper{background:red; width:200px; height:200px;}
Page-B<div class="wrapper">Headline<div>.wrapper{background:black; width:400px; height:400px;}
import React, { Component } from 'react';
import NavbarafterLogin from './NavigationBar/navbarafterlogin';
import '../../Css/afterlogins.css';
class Home extends Component {
render() {
return (
<div class="col-sm-12 col-xs-12">
<NavbarafterLogin/>
<div class="body-wrapper">
<div class="container">
<ViewProfile/>
</div>
</div>
</div>
)
}
}
export default Home;
import React, { Component } from 'react'
import NavbarBeforeLogin from './NavigationBar/navbarbeforelogin';
import '../../Css/beforelogins.css';
class Index extends Component {
render() {
return (
<div class="col-sm-12 col-xs-12">
<NavbarBeforeLogin />
<div class="body-wrapper clearfix">
<div class="col-sm-12 col-xs-12">
<div class="banner-sec">
<div class="jumbotron">
<div class="container">
<h1>Submit <strong>Profile</strong></h1>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Index;