React component's styles conflict with other component's styles - css

Question

I have an app component like this:
const App = () => {
return (
<Router>
<Route exact path='/' component={Landing} />
<Route path='/login' component={Login} />
</Router>
)
}
Each component has its own directories and stylesheet. my folder structure is like this:
src
|
|
Landing|
| |
| Landing.js
| Landing.module.css
|
|
Login|
| |
| Login.js
| Login.module.css
|
app.js
index.js
My problem is that the stylesheets of Login and Landing components conflict with each other and the Landing page doesn't look good. for example, the login's background color applies on the Landing page and I don't want this.
I imported only on CSS file in each component like this:
import styles from './Landing.module.css'
and this is an example of how I'm using styles variable:
return (
<div className={styles.navBar}>
<Link to="/">
<img className={styles.logo} src="https://image.flaticon.com/icons/png/512/2039/2039175.png" />
</Link>
{loggedIn &&
<div>
<button onClick={logout}>log out</button>
<Link className={styles.navItem} to="/users">get users</Link>
</div>
}
{!loggedIn &&
<div>
<Link className={styles.navItem} to="/login">log in</Link>
<Link className={styles.navItem, styles.btn} to="/signup">signup</Link>
</div>
}
</div>
)
please help me.

Answer 1

Even if it's old, I'm going to answer for who comes after: the reason why it happens is that your CSS selectors have most likely the same specificity, hence it's the order of appearance that decides which style gets applied.
Login in your folder structure comes after Landing, so your bundler will make Login's styles appear last in your bundled CSS, which then will override your Landing's ones.
There are a lot of solutions to this problem:
you can increase the specificity of the selector that you want to win (e.g. by repeating twice the class in your CSS file)
you can decrease the specificity of the selector you want to lose (e.g. with :where())
now you can use Cascade Layers if you are ok with which browsers are supported (e.g. #layer)
etc...