CODEWITHSUNDEEP
javascriptcssreactjsreact-router-dom
iLiA
iLiA

Reputation: 3153

import divided css file in react components

Hello I have my components split and using react-router-dom and i decided to split css for each component for example Main.jsx - Main.css CustomerBase.jsx - customerbase.css but problem is that css are joined and if i set body color to white for CustomerBase.jsx and yellow for Main.jsx it will use white for both Main and CustomerBase How can i prevent this?

like so: customerbase.css

body{
    background: white;
}

main.css 

body{
    overflow: hidden; 
    margin: 0;
    padding: 0;
    background: rgb(236, 107, 32); 
}

Upvotes: 2

Views: 54

Answers (1)

Bishoy Melek
Bishoy Melek

Reputation: 56

I think you shouldn't be using body tag multiple times.

You can have a wrapper id name (#my_component_id) for each component, And inside its CSS file, add the #my_component_id before your styling to just affect only this component. or if you are using something like Sass, you can just wrap all your styling inside the #my_component_id

#title-component {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#title-component h1 {
    color: green;

}

#content-component {
    background: white;
}

#content-component h1 {
    color: red;
}
<div id="title-component">
  <h1>Hi There, Here you have green h1 tag.</h1>
</div>

<div id="content-component">
  <h1>But Here, You can see a red h1 tag!</h1>
</div>

Upvotes: 1

Related Questions