stylings work even without importing css file in JS files

Question

I have a create-react-app project. In src folder, I import index.css into index.js file to style globally. Besides that, I also have multiple css files for each route. But my concern is the stylings in other css files work even though I don't import them anywhere in the project. I wonder if it's safe to use them without importing?

Answer 1

Doing import '.css' on one component will not encapsulate .css only for that component. React converts all your CSS code into a file and then outputs it. This can cause issue with your code in cases of it overwriting other file's css.

For each component you could specify a className. For example,

<div className="componentone"> </div>

then in your css do

.componentone p {...}

to prevent the overwriting from happening