React css class names are global?

Question

I'm not going to delve into the code too much in this question, instead, I'm looking for a high-level answer.

In my js, I have a div with the class name potato. I have a file called myStyles.css, and I imported that CSS file into my js file. Now in my CSS, I targeted .potato, and do my styling. All good so far.

Now I create a new js file, and in that new file I again have a div name by potato. In this new js file, I do not import myStyles.css. However, for some reason, the styling from myStyles.css is being applied to that div!

Please let me know why this is the case? Why is it pulling styling from an unimported file?

If you need any actual code on my part to answer this question, please let me know and I can provide it.

Thanks!

It is not pulling style from an unimported file, the CSS is global. This is generally why you only need a single import of any custom *.css files, generally at/near the root of your application. — Drew Reese
– Drew Reese, Commented Mar 15, 2021 at 5:35
This is because css is global, just use css modules to create css file constrained to a component - css-tricks.com/css-modules-part-1-need — tarzen chugh
– tarzen chugh, Commented Mar 15, 2021 at 5:46

Apoorva Chikara · Accepted Answer · 2021-03-15 08:43:48Z

1

I got the same problem which you are facing. So if you make a simple css file with class then it will work as a global file. so the solutions are following:

1-> Import css as module and use it

2-> Don't use same class or don't give css directly to element

edited Mar 15, 2021 at 8:43

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

answered Mar 15, 2021 at 5:41

Yashvant Vala

523 bronze badges

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

Comments

kazmi066 · Accepted Answer · 2021-03-15 05:40:56Z

0

The css will be global for all components.
Even if you import individual css for all components, it will still apply it to all other components.

To fix this, just add and "id" or "class" to the parent and then use that parent element's id to access its classes.

#myComponent .first{
   /* your css */
}

answered Mar 15, 2021 at 5:40

kazmi066

6276 silver badges19 bronze badges

Collectives™ on Stack Overflow

React css class names are global?

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