5

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?

Darien Miller
  • 651
  • 2
  • 7
  • 16
  • 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 Aug 01 '21 at 01: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 `
    example
    ` 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 Aug 01 '21 at 07:31
  • 1
    I think sharing your CSS definitions will help understand the issue – thedude Aug 01 '21 at 08: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 Aug 01 '21 at 08:04

2 Answers2

2

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.

Giorgi Moniava
  • 27,046
  • 9
  • 53
  • 90
  • 1
    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. – Darien Miller Aug 01 '21 at 13:51
  • 3
    @DarienMiller react doesn't scope the css based on components AFAIK. – Giorgi Moniava Aug 01 '21 at 16:12
  • Ahh, understand! That makes sense, thanks for answering. – Darien Miller Aug 02 '21 at 01:12
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

Jamal
  • 21
  • 3
  • 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. – free2idol1 May 11 '23 at 11:05