1

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?

Thi Nguyen
  • 49
  • 2
  • 6

1 Answers1

0

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

Bas
  • 1,353
  • 3
  • 7
  • 18
  • I do have different class name for each page and each element in specific. So, is it ok to NOT import css files since like you said React converts all css code into one file? – Thi Nguyen May 04 '22 at 01:26
  • Yes. you could just have 1 import in the parent component (e.g. App.js) – Bas May 04 '22 at 01:55