in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately

CodePudding user response：

Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.

The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.

CodePudding user response：

At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.

If you need to scope styles to components, you need to use something like styled components.

Take a look at this post that might help you understand it better. https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/