Css file in react gets applied to all files even though it was imported in just one-CodePudding

So I am learning react and working on a project right now and one thing is getting extremely annoying.

Example, I have the following files: script1.js stylesheet1.css and script2.js stylesheet2.css

In stylesheet1.css if I do:

span { blah blah }
button { blah blah}

this will always get applied in script2.js even though I only imported stylesheet1.css in script1.js. Now I know i can just use class names or ID names but this is much easier. How to get around this? What am I doing wrong? Basically, all i want is to apply properties for ALL the buttons or ALL the divs in one .js file but it gets applied to the entire project

CodePudding user response：

You can use the component approach for css like you can create stylesheet1.module.css and can import in script1.js like

import style from '../stylesheet1.module.css' and use id or class

CodePudding user response：

I believe if you just use classes debugging will be much easier when you run into a problem. Just use the the same class for all the buttons that will do the job.

I had a project where one of my colleague did the styling as you did and every css code was clashing with each other. The debugging was a nightmare.