CODEWITHSUNDEEP
cssreactjsreact-router
Furkan
Furkan

Reputation: 85

React Route causes to class change

I want to use same component in another page. One of it on homepage and another one is on category page.

----- HEADER className="popular-header" -----
----- BODY ---------------------

Homepage css folder 

.popular-header {
 display: flex;
 @blabla
}

But problem is header shouldnt visible this time and also i will change some button colors in body. So what i tried is i changed popular-header css like this in its local folder.

CategoryPage css folder

.popular-header {
 display: none;
}

So when i go to category page everything is fine, my header is not there. But when i come back to homepage also my homepage header is gone. Because my class has overriden by that (none). If there was only header part that i want change I could pass props and make it conditionally rendered. But there is also some classes i want change. It is so weird. Two different pages but they concanate each other i guess some SPA issues. Any suggestions ?

Upvotes: 0

Views: 166

Answers (2)

Andus
Andus

Reputation: 1731

Say you have a component named PopularHeader, define a prop name style (or something like extraStyle if you want to)

const PopularHeader = ({ style }) => {
    <View className="popular-header" style={{...style}}/>
}

and you have the normal css class

.popular-header {
    display: flex;
}

Normalluy you call you component like this:

<PopularHeader />;

When you route to another page and you want the header to disappear, simply:

<PopularHeader style={{ display: none }}/>;

Upvotes: 1

Edgar Cuarezma
Edgar Cuarezma

Reputation: 125

CSS styles are global, so any component will have access to them no matter what file they are in. Try using a third-party css or js to css library, or you can change the files to fileName.module.css and import classes from that file. You'll then have to label each className to {classes.style} and should now be unique to their respective components. 

import classes from './fileName.module.css'

Upvotes: 0

Related Questions