Css available even if not imported

Hi, I have an issue where once I import a css file the classes are known throughout the app. e.g:

in LoginContainer I have: import './login.css';… <div className="container">//html here</div> and in ForgotPasswordContainer: import './forgotPassword.css';… <div className="container">//html here</div> both have a different class for container and are imported by different files. But I keep getting only a single occurrence meaning if I change one container class then html changes for both.

this doesnt allow me to override. Im used to working with Angular and scss so Im new to the importing css classes so Im not sure if this is how its supposed to work. But the way it is now for me importing classes doesnt make sense since they are global for the entire project.

as far as changes to the create-react-app boilerplate, I have only introduced the node-sass change which doesnt effect any of this code since I watch different folders

can anyone assist?

[gaearon]

I wish there was a better way to solve this.

I’m just not comfortable enabling CSS Modules by default because:

• It uses custom syntax extensions to CSS and breaks some tooling.
• It is local by default and people unfamiliar with this paradigm will file hundreds of issues about CSS “not working”.
• This space is rapidly changing and I don’t want to embrace a potential dead end solution.

If there is a clear winner in the “local CSS” space that community fully embraces I’d be happy to go with it but it’s not the case today.

[tbillington]

@Jony-Y I don’t want to be rude but it might help if you had a better understanding of how css works. There’s no way possible right now to do anything like what you’re asking with css.

However, there are libraries that link styles to the react component by writing the css in the javascript then it autogenerates custom css names or sets the styles on the html elements themselves so they never clash. Something like this https://github.com/styled-components/styled-components.