I have a React App with the following folder structure.

All my "pages" have their own Folder with a .jsx file and a .css to style the page.

I imported the CSS in the HomePage.jsx like:

import '../HomePage/HomePageStyles.css';  //HomePage.jsx

So far, everything is working just fine. Then I created the ChampionDetailPage.css and imported it in the ChampionDetailpage.jsx like that.

import '../ChampionDetailPage/ChampionDetailPageStyles.css';  //ChampionDetailPage.jsx

Now things start to get funny. The HomePages.jsx suddenly start to use styles from ChampionDetailpage.css that have the same class names without any obvious reason. The goes vice versa, so the ChampionDetailPage.jsx uses classes from the HomePageStyles.css as well.

For example, I have the class .content-right in both .css files

.content-right{  /* HomePage.css */
    width: 55%;
}

.content-right{  /* ChampionDetailStyles.css */
    display: flex;
    padding-right: 20px;
    flex-grow: 100;
    flex-direction: column;
}

In this case, React somehow styles my Homepage.jsx with the ChampionDetailPages.css which is also visible in the Chrome dev tools.

Why does that happen and how do I fix it?

Things I tried already:

• Changing the import eg. import './ChampionDetailPageStyles.css';

• Throwing the CSS into its own directory in both cases, the problem remains the same!

Thanks for your help in advance.