How to fix error override CSS when change component in ReactJS

Question

Login.js

import React from 'react'

export default class Login extends React.Component {
   componentWillMount(){
        import ('./styles/login_page.css');
    }
   ....
   <Link to="/register">Create account</Link>
}

Register.js

import React from 'react''

export default class Register extends React.Component {
   componentWillMount(){
        import ('./styles/register_page.css');
    }
   ....
   <Link to="/login">Login Now</Link>
}

App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Switch, BrowserRouter } from 'react-router-dom'
import Login from './Login'
import Register from './Register'
import PageNotFound from './PageNotFound'

ReactDOM.render(
  <BrowserRouter>
    <Switch>
        <Route exact path='/login' component={Login }/>
        <Route exact path='/' component={Home} />
        <Route exact path='/register' component={Register }/>
        <Route component={PageNotFound} />
      </Switch>
  </BrowserRouter>,
  document.getElementById('root'));

After rendering, I click Login then click Create account and click again Login, login component's CSS is overrided by register component's CSS and home page is same. I want when going to any component, component's CSS is loading. Is there way to fix?

Please refer this, it helps you to solve this issue, stackoverflow.com/questions/57714752/… — Kannan G
– Kannan G, Commented Aug 30, 2019 at 9:54
I have refered but CSS is loaded, they will overwrite the before — Huy Vu The
– Huy Vu The, Commented Aug 30, 2019 at 10:02

Nisarg Shah · Accepted Answer · 2019-08-30 10:08:10Z

This is typically resolved by using descendant combinator in CSS. You need to set a distinct class in the root element of each component, and declare all other CSS styles by writing their selectors as descendants of that class.

Login.js

import React from 'react'

export default class Login extends React.Component {
   componentWillMount(){
        import ('./styles/login_page.css');
    }
   ....
   <Link class="login-component" to="/register">Create account</Link>
}

login_page.css

.login-component .item1 { ... }
.login-component .item2 { ... }

Register.js

import React from 'react''

export default class Register extends React.Component {
   componentWillMount(){
        import ('./styles/register_page.css');
    }
   ....
   <Link class="register-component" to="/login">Login Now</Link>
}

register_page.css

.register-component .item1 { ... }
.register-component .item2 { ... }

So even if both components have elements matching .item1 and .item2, they will select the correct rule due to the descendant combinator. This might be a bit verbose with raw CSS, but if you're using any preprocessor it should be pretty simple.

Else, you might just want to make the selectors distinct somehow.

willbroad nyirenda · Accepted Answer · 2022-03-29 11:42:52Z

0

I also faced the same challenge while using different css modules within the same app, I guess the problem is while the compiler is building the css, since all the css are compiled into a single file you might want differentiate them by giving them diffrent main class name.

The solution in that case is to nest your css styles in the base class if your using sass

.loginpageContainer {
  .input{ //custom css
 }}
.registerPageContainer{ 
 .input{
// custom css
}}

Same wise if your using pure css just use the main class

.loginContainer .login .input{
//custom css
} 
.registerContainer .login .input{
//custom css
}

edited Mar 29, 2022 at 11:42

answered Mar 29, 2022 at 11:37

willbroad nyirenda

313 bronze badges

Collectives™ on Stack Overflow

How to fix error override CSS when change component in ReactJS

Login.js

Register.js

App.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Login.js

Register.js

App.js

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related