How to use different CSS file in child of react route

Question

I just started learning REACT, but I have a problem with React-route, problem is children use parent CSS, but how can we use fresh new CSS on child? Not anything get from parent CSS?

I have a file structure like this:

---src
-----index.js
-----login.js
-----home.js
-----style.css

I imported 'style.css' in login.js but it continute to use in login.js, I want to design complete different style in home.js, so I created home.css and put some element in there but it not cast over the style.css. Here is some of my code

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import Login from './login.js'
import New from './home.js'
const routing = (
    <Router>
        <div>
            <Route exact path="/" component={Login} />
            <Route path="/new" component={New} />
        </div>
    </Router>
  );
ReactDOM.render(routing, document.getElementById('root'));

my login.js problem is style.css have a body element that I can't change, if use a div in login.js and put a className it have background but have border, not full page.So I load localhost:3000/new it still have same background, I want it totally white, like fresh page or have dirrent CSS, not use parent. So my question is:

How to make each child in route have unique style, not have it from it parent? or how can I do that with React?

Does this answer your question? CSS not changing when using React Router to route to another component — Quentin
– Quentin, Commented Dec 8, 2021 at 8:41

Masih Jahangiri · Accepted Answer · 2019-12-05 11:27:35Z

0

You can use many different approach to styling a react app like css-in-js, css modules, tailwindcss,... I recommend use css modules because is not effect on app performance (zero run-time). To apply css modules in your project must config webpack css loader (CRA support out of the box).

answered Dec 5, 2019 at 11:27

Masih Jahangiri

11.1k4 gold badges54 silver badges59 bronze badges

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

8 Comments

Thi Ôn Over a year ago

thank you so much,so use css loader we can get rid of using parent style, right?

Masih Jahangiri Over a year ago

Yes when using css modules each class names scoped locally and you can use css class like js moules. At compile time hashed class name .

Masih Jahangiri Over a year ago

If my answer is complete and correct please endorse me.

Thi Ôn Over a year ago

i still reseach for css loader but when i get it by npm i don't see webpack.config.js? how can i use this with my css

Masih Jahangiri Over a year ago

Are you using Create React App?

|

Collectives™ on Stack Overflow

How to use different CSS file in child of react route

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related