How to avoid css overwriting in react.js production

Question

I build a react app with create-react-app and imported all css files as

import '../Styles/dashboardStyles.css'

In the production version all css files get minified and the common css applied to every page instead of the particular page that applied.

E.G

  src/Styles/dashboardStyle.css:

  h1 {
    color: (some color);
  }

  src/Styles/loginStyle.css:

  h1 {
    color: (some other color);
  }

  p {
    color: (some color);
  }

I don't want any color or style from dashboardStyle.css to be applied in loginStyle.css. But, in the minification process the css files get concatted and the styles are mixed up.

Please help me to solve this problem.