The same class name in two different css files conflict in ReactJS

Question

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!

Unless your build process modifies the CSS (E.g. CSS modules) they will still all end up on the same page in the end, and a standard CSS rule applies to everything it matches, regardless of the React component it came from. — DBS
– DBS, Commented Feb 11, 2022 at 10:22

Wraithy · Accepted Answer · 2022-02-11 10:22:39Z

2

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

answered Feb 11, 2022 at 10:22

Wraithy

2,0961 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awais Bin Riaz · Accepted Answer · 2022-02-11 10:27:01Z

0

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.

answered Feb 11, 2022 at 10:27

Awais Bin Riaz

331 silver badge7 bronze badges

Collectives™ on Stack Overflow

The same class name in two different css files conflict in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related