How do I prevent the css in one component from affecting the css in another component in React?

Question

I'm new to React, so I'm not exactly sure why this is happening. Using the React Router, I have three routes, /, /signup, and /login, and the importing of css in each component spills over into the css of the other components, ruining the styling. In this case, instead of the div element word being the color as described in each component's css, they all come out green which should only happen for the Signup component. What can I do to fix this?

App.js

import HomePage from './pages/HomePage/HomePage'
import LoginPage from './pages/LoginPage/LoginPage'
import SignupPage from './pages/SignupPage/SignupPage'
import  {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

function App() {
    return (
      <Router>
        <Switch>
          <Route path="/" exact component={HomePage}/> 
          <Route path="/signup" component={SignupPage}/>
          <Route path="/login" component={HomePage}/>
        </Switch>
      </Router>
    )
}

export default App;

LoginPage.js

import { React } from 'react'
import "./LoginPage.css"

export default function LoginPage(){
    return(
      //In css file, word is red, but comes out green instead
      <div className="word">login</div>
    )
}

SignupPage.js

import { React } from 'react'
import "./SignupPage.css"

export default function SignupPage(){
    return(
      //In css file, word is green
      <div className="word">signup</div>
    )
}

HomePage.js

import React, { useState } from 'react'
import "./HomePage.css"

export default function HomePage() {

    return (
         //In css file, word is hotpink, but comes out green instead
         <div className="word">Home</div>
    )

Is there something I need to add to my App.js file?

It’s unclear what the underlying issue is. Why is the styling so different it creates problems? What specifically is is the problem? — Dave Newton
– Dave Newton, Commented Aug 1, 2021 at 1:31
I'll try to be as descriptive as I can, describing my issue is a little harder than I thought. The problem I'm having is that on each route, the css of each component is spilling over into the other components. For example, simply adding the element <div className="word">example</div> to each component and changing its color to red, blue, and yellow respectively in the css files results in example being green in each route. Does that clarify anything? — Darien Miller
– Darien Miller, Commented Aug 1, 2021 at 7:31
I think sharing your CSS definitions will help understand the issue — thedude
– thedude, Commented Aug 1, 2021 at 8:03
@DarienMiller there are several ways to fix this like CSS modules, styled-components or having a parent class that's unique to each component. — Ramesh Reddy
– Ramesh Reddy, Commented Aug 1, 2021 at 8:04

gmoniava · Accepted Answer · 2021-08-01 08:25:17Z

4

Create a top div for each page:

export default function HomePage() {
return (
     <div className="homepage"><div className="word">Home</div></div>
)

Do similarly for signup page.

Then in css

homepage.css

 .homepage .word{
     
      color:red;
    
  }

signup.css

.signup .word{
 
  color:green;

 }

Now depending if you use word class inside signup page or homepage (any level deep), word will have different styling.

edited Aug 1, 2021 at 8:25

answered Aug 1, 2021 at 8:04

gmoniava

28.9k9 gold badges61 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darien Miller Over a year ago

This solution actually worked out for me perfectly, but coming from html + css + raw Javascript, I'm curious as to why I need to wrap the code in a larger parent div in order for the css in each component to not mix in with the other components.

gmoniava Over a year ago

@DarienMiller react doesn't scope the css based on components AFAIK.

Darien Miller Over a year ago

Ahh, understand! That makes sense, thanks for answering.

Jamal · Accepted Answer · 2022-01-27 07:54:13Z

1

The best way to prevent that is by using CSS Modules because CSS Modules let you use the same CSS class name in different files without worrying about naming clashes

Using CSS module is simple, just follow it's naming convention which looks like this, [name].module.css

Example: CSS className selectors of the following CSS modules, are independently

App.module.css

.container{
  color: #fff;
}

Navigation.module.css

.container{
  color: #000;
}

Click here to read more about CSS modules

answered Jan 27, 2022 at 7:54

Jamal

213 bronze badges

1 Comment

free2idol1 Over a year ago

thanks for the answer, one thing I want to add is module css would not apply to direct html element styling, i.e input[type="file"] would be also applied to all components.

Collectives™ on Stack Overflow

How do I prevent the css in one component from affecting the css in another component in React?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related