Where is the right way to include scss styles in ReactJS?

Question

React

The situation is like this, I have a scss file where there are some common styles like variables with colors and a grid for some blocks.

I include this file in each component via import and use the variables and the necessary selectors from there. But looking at the inspector, he saw that there, for one element, it overwrites the selectors several times.
I think this is due to the fact that the style file is included in all components, here it is and render it many times.
Where do I need to include my scss so that my variables and selectors are read everywhere and not call it with the rendering of each component. I don't think this is right.
I would be grateful for any advice.

Answer 1

The decision is wrong. General styles are imported once in the root style file. If there are frequently used variables, then you can create a scss file specifically for them and import it into various components several times already.