I have a component folder and two different components in it, every component has its own css file with the link in its jsx file. :

when I use a the same class name in them it affects the other component too! While the other component has its own css file and link. Why is that?

For example: In both components I have a class named: "PlayerPhoto" when I change its height and width, the photo in other components (with separate css file but the same class name) would change too!

CodePudding user response：

It happens because your css is imported simply as normal css - without unique identificator. You need to specify classes with unique names or have a look at Css Modules which solve this problem and creating unique classes automatically

Or you can use libraries as EmotionJS or styled-components

CodePudding user response：

Your app.js file may has the property for the className="PlayerPhoto", make sure that your app.css has not the same className if there were, then it overwrite your component base css. You can also use inline css, to overcome this type of issues.