I have a component. For this component I created css file with the description for the class "active" and imported it into the component. Also in this component I use NavLink from React Router. And NavLink gives for an element class "active", when user tapped this element.

In other component, which is fully separate, I also use NavLink. And there I didn't import css file with "active" class description. But all styles from the class "active" from the first component works also here. It means elements in this component don't look like they should.

Why it works so? And how I can make css file separate for each component?

Thank You.

CodePudding user response：

Because you gave them the same name, if you'll read how React works what it does it compiles everything in the project and everything that got the same classes name will work everywhere.

I've noticed it when I had two different files of CSS for two different components but for some reason (the reason I wrote here above) it took the design from the other file. Then I changed the name of the class to something else and it worked.