CODEWITHSUNDEEP
reactjs
Mohamad reza1987
Mohamad reza1987

Reputation: 313

Css file effect on another file in react js

I'm new in front end develop and using react js for develop a website I have some components js file and same in Css file when I changed some class in Css headers same class in footer got change and it's not true what what's wrong in this file I render a component in one file in the end

Upvotes: 2

Views: 5562

Answers (2)

Gautam Naik
Gautam Naik

Reputation: 9358

You can use CSS modules for your project CSS Modules.Using this, unique class names are generated.

If you dont want to do this, then u you can use CSS class nesting, for eg: For Header Component

<div className="header">
 <div className="title">Main Page</div>
</div>

use css like this:

 .header .title{
  color:red;
 }

Similarity for other components use css like this

 .footer .title{
  color:green;
 }

This way, your css styles will not get mixed up

Upvotes: 6

Agney
Agney

Reputation: 19204

The CSS file that you import into React is global, which means that if you import a CSS file into a component, it gets added to the HEAD of the HTML document, (if you have hot module reloading) and naturally affects all the components rendered to HTML.

If you want to scope the CSS that you write to a particular component, you can use a library like CSS Modules

Upvotes: 2

Related Questions