Импортированные стили в ReactJS

Делаю приложение на ReactJS.

Есть два "модуля" - Admin, Operator.

У каждого модуля свои стили. Есть конечно общие стили. С этим проблем нет. Но вот есть стили которые относятся к модулю. Я их импортирую в компоненте страницы модуля (к примеру LoginPage), к примеру так:

import '../../style/page/auth/style.css';
import '../../style/page/auth/media.css';
import '../../style/page/auth/custom.css';

Но вот проблема в том что все стили, со всех страниц и модулей вставляются в head страницы. И стили будут перебиваться.

Как это пофиксить? что бы в head вставлялись стили только для нужного модуля.

в index.js у меня есть роутер:

<Router>
    <Switch>
        <Route path="/admin" component={AdminModule}/>
        <Route path="/operator" component={OperatorModule}/>
        <Route component={NotFoundPage}/>
    </Switch>
</Router>